From c772a4dcdda3b1cc19ce3c0de08c0a6b6da7d34d Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 11:55:41 -0300
Subject: [PATCH 01/12] =?UTF-8?q?=F0=9F=9A=80=20chore(package.json):=20add?=
 =?UTF-8?q?=20vite-plugin-svgr=20dependency=20to=20both=20root=20and=20fro?=
 =?UTF-8?q?ntend=20package.json=20=E2=9C=A8=20feat(GenericNode):=20add=20C?=
 =?UTF-8?q?hromaIcon=20and=20fix=20validation=20status=20icons=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20style(GenericNode):=20refactor=20GenericNode=20c?=
 =?UTF-8?q?omponent=20to=20improve=20readability=20=F0=9F=90=9B=20fix(vite?=
 =?UTF-8?q?.config.ts):=20add=20svgr=20plugin=20to=20the=20frontend=20Vite?=
 =?UTF-8?q?=20configuration=20The=20vite-plugin-svgr=20dependency=20was=20?=
 =?UTF-8?q?added=20to=20both=20the=20root=20and=20frontend=20package.json?=
 =?UTF-8?q?=20files=20to=20enable=20the=20use=20of=20SVG=20files=20as=20Re?=
 =?UTF-8?q?act=20components.=20The=20GenericNode=20component=20was=20updat?=
 =?UTF-8?q?ed=20to=20include=20the=20ChromaIcon=20component=20and=20to=20f?=
 =?UTF-8?q?ix=20the=20validation=20status=20icons.=20The=20component=20was?=
 =?UTF-8?q?=20also=20refactored=20to=20improve=20readability.=20The=20svgr?=
 =?UTF-8?q?=20plugin=20was=20added=20to=20the=20frontend=20Vite=20configur?=
 =?UTF-8?q?ation=20to=20enable=20the=20use=20of=20SVG=20files=20as=20React?=
 =?UTF-8?q?=20components.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   5 +
 src/frontend/package-lock.json                | 510 +++++++++++++-----
 src/frontend/package.json                     |   3 +-
 .../src/CustomNodes/GenericNode/index.tsx     |  37 +-
 src/frontend/src/icons/ChromaIcon/chroma.svg  |   7 +
 src/frontend/src/icons/ChromaIcon/index.tsx   |  12 +
 src/frontend/src/icons/index.tsx              |   1 +
 src/frontend/vite.config.ts                   |   4 +-
 8 files changed, 421 insertions(+), 158 deletions(-)
 create mode 100644 package.json
 create mode 100644 src/frontend/src/icons/ChromaIcon/chroma.svg
 create mode 100644 src/frontend/src/icons/ChromaIcon/index.tsx
 create mode 100644 src/frontend/src/icons/index.tsx

diff --git a/package.json b/package.json
new file mode 100644
index 000000000..091eb76c4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vite-plugin-svgr": "^3.2.0"
+  }
+}
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index b98a26b64..b55c44b46 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -37,6 +37,7 @@
                 "remark-gfm": "^3.0.1",
                 "remark-math": "^5.1.1",
                 "uuid": "^9.0.0",
+                "vite-plugin-svgr": "^3.2.0",
                 "web-vitals": "^2.1.4"
             },
             "devDependencies": {
@@ -79,7 +80,6 @@
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
             "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
-            "peer": true,
             "dependencies": {
                 "@jridgewell/gen-mapping": "^0.1.0",
                 "@jridgewell/trace-mapping": "^0.3.9"
@@ -100,30 +100,28 @@
             }
         },
         "node_modules/@babel/compat-data": {
-            "version": "7.21.7",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.7.tgz",
-            "integrity": "sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==",
-            "peer": true,
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.3.tgz",
+            "integrity": "sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==",
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/core": {
-            "version": "7.20.12",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.20.12.tgz",
-            "integrity": "sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==",
-            "peer": true,
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
+            "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
             "dependencies": {
                 "@ampproject/remapping": "^2.2.0",
                 "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.21.5",
-                "@babel/helper-compilation-targets": "^7.21.5",
-                "@babel/helper-module-transforms": "^7.21.5",
-                "@babel/helpers": "^7.21.5",
-                "@babel/parser": "^7.21.8",
-                "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.5",
-                "@babel/types": "^7.21.5",
+                "@babel/generator": "^7.22.0",
+                "@babel/helper-compilation-targets": "^7.22.1",
+                "@babel/helper-module-transforms": "^7.22.1",
+                "@babel/helpers": "^7.22.0",
+                "@babel/parser": "^7.22.0",
+                "@babel/template": "^7.21.9",
+                "@babel/traverse": "^7.22.1",
+                "@babel/types": "^7.22.0",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.2",
@@ -138,22 +136,12 @@
                 "url": "https://opencollective.com/babel"
             }
         },
-        "node_modules/@babel/core/node_modules/semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-            "peer": true,
-            "bin": {
-                "semver": "bin/semver.js"
-            }
-        },
         "node_modules/@babel/generator": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.5.tgz",
-            "integrity": "sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==",
-            "peer": true,
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.3.tgz",
+            "integrity": "sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==",
             "dependencies": {
-                "@babel/types": "^7.21.5",
+                "@babel/types": "^7.22.3",
                 "@jridgewell/gen-mapping": "^0.3.2",
                 "@jridgewell/trace-mapping": "^0.3.17",
                 "jsesc": "^2.5.1"
@@ -163,10 +151,9 @@
             }
         },
         "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": {
-            "version": "0.3.2",
-            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
-            "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
-            "peer": true,
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+            "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
             "dependencies": {
                 "@jridgewell/set-array": "^1.0.1",
                 "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -177,12 +164,11 @@
             }
         },
         "node_modules/@babel/helper-compilation-targets": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz",
-            "integrity": "sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==",
-            "peer": true,
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz",
+            "integrity": "sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==",
             "dependencies": {
-                "@babel/compat-data": "^7.21.5",
+                "@babel/compat-data": "^7.22.0",
                 "@babel/helper-validator-option": "^7.21.0",
                 "browserslist": "^4.21.3",
                 "lru-cache": "^5.1.1",
@@ -195,20 +181,10 @@
                 "@babel/core": "^7.0.0"
             }
         },
-        "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-            "version": "6.3.0",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-            "peer": true,
-            "bin": {
-                "semver": "bin/semver.js"
-            }
-        },
         "node_modules/@babel/helper-environment-visitor": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz",
-            "integrity": "sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==",
-            "peer": true,
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz",
+            "integrity": "sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==",
             "engines": {
                 "node": ">=6.9.0"
             }
@@ -217,7 +193,6 @@
             "version": "7.21.0",
             "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
             "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
-            "peer": true,
             "dependencies": {
                 "@babel/template": "^7.20.7",
                 "@babel/types": "^7.21.0"
@@ -230,7 +205,6 @@
             "version": "7.18.6",
             "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
             "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
-            "peer": true,
             "dependencies": {
                 "@babel/types": "^7.18.6"
             },
@@ -250,19 +224,18 @@
             }
         },
         "node_modules/@babel/helper-module-transforms": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz",
-            "integrity": "sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==",
-            "peer": true,
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.1.tgz",
+            "integrity": "sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==",
             "dependencies": {
-                "@babel/helper-environment-visitor": "^7.21.5",
+                "@babel/helper-environment-visitor": "^7.22.1",
                 "@babel/helper-module-imports": "^7.21.4",
                 "@babel/helper-simple-access": "^7.21.5",
                 "@babel/helper-split-export-declaration": "^7.18.6",
                 "@babel/helper-validator-identifier": "^7.19.1",
-                "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.5",
-                "@babel/types": "^7.21.5"
+                "@babel/template": "^7.21.9",
+                "@babel/traverse": "^7.22.1",
+                "@babel/types": "^7.22.0"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -280,7 +253,6 @@
             "version": "7.21.5",
             "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
             "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
-            "peer": true,
             "dependencies": {
                 "@babel/types": "^7.21.5"
             },
@@ -292,7 +264,6 @@
             "version": "7.18.6",
             "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
             "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
-            "peer": true,
             "dependencies": {
                 "@babel/types": "^7.18.6"
             },
@@ -320,20 +291,18 @@
             "version": "7.21.0",
             "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
             "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
-            "peer": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helpers": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.5.tgz",
-            "integrity": "sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==",
-            "peer": true,
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.3.tgz",
+            "integrity": "sha512-jBJ7jWblbgr7r6wYZHMdIqKc73ycaTcCaWRq4/2LpuPHcx7xMlZvpGQkOYc9HeSjn6rcx15CPlgVcBtZ4WZJ2w==",
             "dependencies": {
-                "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.5",
-                "@babel/types": "^7.21.5"
+                "@babel/template": "^7.21.9",
+                "@babel/traverse": "^7.22.1",
+                "@babel/types": "^7.22.3"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -353,10 +322,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.21.8",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.8.tgz",
-            "integrity": "sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==",
-            "peer": true,
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.3.tgz",
+            "integrity": "sha512-vrukxyW/ep8UD1UDzOYpTKQ6abgjFoeG6L+4ar9+c5TN9QnlqiOi6QK7LSR5ewm/ERyGkT/Ai6VboNrxhbr9Uw==",
             "bin": {
                 "parser": "bin/babel-parser.js"
             },
@@ -390,33 +358,31 @@
             }
         },
         "node_modules/@babel/template": {
-            "version": "7.20.7",
-            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
-            "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
-            "peer": true,
+            "version": "7.21.9",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
+            "integrity": "sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==",
             "dependencies": {
-                "@babel/code-frame": "^7.18.6",
-                "@babel/parser": "^7.20.7",
-                "@babel/types": "^7.20.7"
+                "@babel/code-frame": "^7.21.4",
+                "@babel/parser": "^7.21.9",
+                "@babel/types": "^7.21.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.5.tgz",
-            "integrity": "sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==",
-            "peer": true,
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.1.tgz",
+            "integrity": "sha512-lAWkdCoUFnmwLBhIRLciFntGYsIIoC6vIbN8zrLPqBnJmPu7Z6nzqnKd7FsxQUNAvZfVZ0x6KdNvNp8zWIOHSQ==",
             "dependencies": {
                 "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.21.5",
-                "@babel/helper-environment-visitor": "^7.21.5",
+                "@babel/generator": "^7.22.0",
+                "@babel/helper-environment-visitor": "^7.22.1",
                 "@babel/helper-function-name": "^7.21.0",
                 "@babel/helper-hoist-variables": "^7.18.6",
                 "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/parser": "^7.21.5",
-                "@babel/types": "^7.21.5",
+                "@babel/parser": "^7.22.0",
+                "@babel/types": "^7.22.0",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             },
@@ -425,9 +391,9 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.5.tgz",
-            "integrity": "sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==",
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.3.tgz",
+            "integrity": "sha512-P3na3xIQHTKY4L0YOG7pM8M8uoUIB910WQaSiiMCZUC2Cy8XFEQONGABFnHWBa2gpGKODTAJcNhi5Zk0sLRrzg==",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.21.5",
                 "@babel/helper-validator-identifier": "^7.19.1",
@@ -608,7 +574,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "android"
@@ -624,7 +589,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "android"
@@ -640,7 +604,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "android"
@@ -656,7 +619,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "darwin"
@@ -672,7 +634,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "darwin"
@@ -688,7 +649,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "freebsd"
@@ -704,7 +664,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "freebsd"
@@ -720,7 +679,6 @@
             "cpu": [
                 "arm"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -736,7 +694,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -752,7 +709,6 @@
             "cpu": [
                 "ia32"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -768,7 +724,6 @@
             "cpu": [
                 "loong64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -784,7 +739,6 @@
             "cpu": [
                 "mips64el"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -800,7 +754,6 @@
             "cpu": [
                 "ppc64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -816,7 +769,6 @@
             "cpu": [
                 "riscv64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -832,7 +784,6 @@
             "cpu": [
                 "s390x"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -848,7 +799,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -864,7 +814,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "netbsd"
@@ -880,7 +829,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "openbsd"
@@ -896,7 +844,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "sunos"
@@ -912,7 +859,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "win32"
@@ -928,7 +874,6 @@
             "cpu": [
                 "ia32"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "win32"
@@ -944,7 +889,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "win32"
@@ -980,7 +924,6 @@
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
             "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
-            "peer": true,
             "dependencies": {
                 "@jridgewell/set-array": "^1.0.0",
                 "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -1009,7 +952,6 @@
             "version": "0.3.2",
             "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
             "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
-            "dev": true,
             "optional": true,
             "peer": true,
             "dependencies": {
@@ -1021,7 +963,6 @@
             "version": "0.3.2",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
             "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
-            "dev": true,
             "optional": true,
             "peer": true,
             "dependencies": {
@@ -1406,6 +1347,252 @@
                 "node": ">=14"
             }
         },
+        "node_modules/@rollup/pluginutils": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+            "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+            "dependencies": {
+                "@types/estree": "^1.0.0",
+                "estree-walker": "^2.0.2",
+                "picomatch": "^2.3.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^1.20.0||^2.0.0||^3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-7.0.0.tgz",
+            "integrity": "sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-7.0.0.tgz",
+            "integrity": "sha512-iiZaIvb3H/c7d3TH2HBeK91uI2rMhZNwnsIrvd7ZwGLkFw6mmunOCoVnjdYua662MqGFxlN9xTq4fv9hgR4VXQ==",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-7.0.0.tgz",
+            "integrity": "sha512-sQQmyo+qegBx8DfFc04PFmIO1FP1MHI1/QEpzcIcclo5OAISsOJPW76ZIs0bDyO/DBSJEa/tDa1W26pVtt0FRw==",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-7.0.0.tgz",
+            "integrity": "sha512-i6MaAqIZXDOJeikJuzocByBf8zO+meLwfQ/qMHIjCcvpnfvWf82PFvredEZElErB5glQFJa2KVKk8N2xV6tRRA==",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-7.0.0.tgz",
+            "integrity": "sha512-BoVSh6ge3SLLpKC0pmmN9DFlqgFy4NxNgdZNLPNJWBUU7TQpDWeBuyVuDW88iXydb5Cv0ReC+ffa5h3VrKfk1w==",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-7.0.0.tgz",
+            "integrity": "sha512-tNDcBa+hYn0gO+GkP/AuNKdVtMufVhU9fdzu+vUQsR18RIJ9RWe7h/pSBY338RO08wArntwbDk5WhQBmhf2PaA==",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-7.0.0.tgz",
+            "integrity": "sha512-qw54u8ljCJYL2KtBOjI5z7Nzg8LnSvQOP5hPKj77H4VQL4+HdKbAT5pnkkZLmHKYwzsIHSYKXxHouD8zZamCFQ==",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-transform-svg-component": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-7.0.0.tgz",
+            "integrity": "sha512-CcFECkDj98daOg9jE3Bh3uyD9kzevCAnZ+UtzG6+BQG/jOQ2OA3jHnX6iG4G1MCJkUQFnUvEv33NvQfqrb/F3A==",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-preset": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-7.0.0.tgz",
+            "integrity": "sha512-EX/NHeFa30j5UjldQGVQikuuQNHUdGmbh9kEpBKofGUtF0GUPJ4T4rhoYiqDAOmBOxojyot36JIFiDUHUK1ilQ==",
+            "dependencies": {
+                "@svgr/babel-plugin-add-jsx-attribute": "^7.0.0",
+                "@svgr/babel-plugin-remove-jsx-attribute": "^7.0.0",
+                "@svgr/babel-plugin-remove-jsx-empty-expression": "^7.0.0",
+                "@svgr/babel-plugin-replace-jsx-attribute-value": "^7.0.0",
+                "@svgr/babel-plugin-svg-dynamic-title": "^7.0.0",
+                "@svgr/babel-plugin-svg-em-dimensions": "^7.0.0",
+                "@svgr/babel-plugin-transform-react-native-svg": "^7.0.0",
+                "@svgr/babel-plugin-transform-svg-component": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/core": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/core/-/core-7.0.0.tgz",
+            "integrity": "sha512-ztAoxkaKhRVloa3XydohgQQCb0/8x9T63yXovpmHzKMkHO6pkjdsIAWKOS4bE95P/2quVh1NtjSKlMRNzSBffw==",
+            "dependencies": {
+                "@babel/core": "^7.21.3",
+                "@svgr/babel-preset": "^7.0.0",
+                "camelcase": "^6.2.0",
+                "cosmiconfig": "^8.1.3"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            }
+        },
+        "node_modules/@svgr/core/node_modules/cosmiconfig": {
+            "version": "8.1.3",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz",
+            "integrity": "sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==",
+            "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/@svgr/hast-util-to-babel-ast": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-7.0.0.tgz",
+            "integrity": "sha512-42Ej9sDDEmsJKjrfQ1PHmiDiHagh/u9AHO9QWbeNx4KmD9yS5d1XHmXUNINfUcykAU+4431Cn+k6Vn5mWBYimQ==",
+            "dependencies": {
+                "@babel/types": "^7.21.3",
+                "entities": "^4.4.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            }
+        },
+        "node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
+        "node_modules/@svgr/plugin-jsx": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-7.0.0.tgz",
+            "integrity": "sha512-SWlTpPQmBUtLKxXWgpv8syzqIU8XgFRvyhfkam2So8b3BE0OS0HPe5UfmlJ2KIC+a7dpuuYovPR2WAQuSyMoPw==",
+            "dependencies": {
+                "@babel/core": "^7.21.3",
+                "@svgr/babel-preset": "^7.0.0",
+                "@svgr/hast-util-to-babel-ast": "^7.0.0",
+                "svg-parser": "^2.0.4"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            }
+        },
         "node_modules/@swc/core": {
             "version": "1.3.57",
             "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.57.tgz",
@@ -2125,6 +2312,11 @@
                 "@types/ms": "*"
             }
         },
+        "node_modules/@types/estree": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+            "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
+        },
         "node_modules/@types/geojson": {
             "version": "7946.0.10",
             "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
@@ -2190,7 +2382,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",
@@ -2395,6 +2587,11 @@
             "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
             "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
         },
+        "node_modules/argparse": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
         "node_modules/aria-query": {
             "version": "5.1.3",
             "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -2588,7 +2785,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
             "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-            "dev": true,
             "optional": true,
             "peer": true
         },
@@ -2613,6 +2809,17 @@
                 "node": ">=6"
             }
         },
+        "node_modules/camelcase": {
+            "version": "6.3.0",
+            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+            "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/camelcase-css": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -3134,7 +3341,6 @@
             "version": "0.17.18",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.18.tgz",
             "integrity": "sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==",
-            "dev": true,
             "hasInstallScript": true,
             "bin": {
                 "esbuild": "bin/esbuild"
@@ -3288,6 +3494,11 @@
                 "node": ">=4.0"
             }
         },
+        "node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+        },
         "node_modules/esutils": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3453,7 +3664,6 @@
             "version": "1.0.0-beta.2",
             "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
             "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-            "peer": true,
             "engines": {
                 "node": ">=6.9.0"
             }
@@ -3487,7 +3697,6 @@
             "version": "11.12.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
             "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-            "peer": true,
             "engines": {
                 "node": ">=4"
             }
@@ -4360,11 +4569,21 @@
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
             "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
         },
+        "node_modules/js-yaml": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+            "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+            "dependencies": {
+                "argparse": "^2.0.1"
+            },
+            "bin": {
+                "js-yaml": "bin/js-yaml.js"
+            }
+        },
         "node_modules/jsesc": {
             "version": "2.5.2",
             "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
             "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-            "peer": true,
             "bin": {
                 "jsesc": "bin/jsesc"
             },
@@ -4381,7 +4600,6 @@
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
             "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-            "peer": true,
             "bin": {
                 "json5": "lib/cli.js"
             },
@@ -4487,7 +4705,6 @@
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
             "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-            "peer": true,
             "dependencies": {
                 "yallist": "^3.0.2"
             }
@@ -6541,6 +6758,14 @@
                 "loose-envify": "^1.1.0"
             }
         },
+        "node_modules/semver": {
+            "version": "6.3.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+            "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+            "bin": {
+                "semver": "bin/semver.js"
+            }
+        },
         "node_modules/side-channel": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -6567,7 +6792,6 @@
             "version": "0.5.21",
             "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
             "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-            "dev": true,
             "optional": true,
             "peer": true,
             "dependencies": {
@@ -6579,7 +6803,6 @@
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-            "dev": true,
             "optional": true,
             "peer": true,
             "engines": {
@@ -6736,6 +6959,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/svg-parser": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+            "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+        },
         "node_modules/symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6782,7 +7010,6 @@
             "version": "5.16.3",
             "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.3.tgz",
             "integrity": "sha512-v8wWLaS/xt3nE9dgKEWhNUFP6q4kngO5B8eYFUuebsu7Dw/UNAnpUod6UHo04jSSkv8TzKHjZDSd7EXdDQAl8Q==",
-            "dev": true,
             "optional": true,
             "peer": true,
             "dependencies": {
@@ -6802,7 +7029,6 @@
             "version": "2.20.3",
             "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
             "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-            "dev": true,
             "optional": true,
             "peer": true
         },
@@ -7150,7 +7376,6 @@
             "version": "4.3.5",
             "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.5.tgz",
             "integrity": "sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==",
-            "dev": true,
             "dependencies": {
                 "esbuild": "^0.17.5",
                 "postcss": "^8.4.23",
@@ -7194,11 +7419,23 @@
                 }
             }
         },
+        "node_modules/vite-plugin-svgr": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-3.2.0.tgz",
+            "integrity": "sha512-Uvq6niTvhqJU6ga78qLKBFJSDvxWhOnyfQSoKpDPMAGxJPo5S3+9hyjExE5YDj6Lpa4uaLkGc1cBgxXov+LjSw==",
+            "dependencies": {
+                "@rollup/pluginutils": "^5.0.2",
+                "@svgr/core": "^7.0.0",
+                "@svgr/plugin-jsx": "^7.0.0"
+            },
+            "peerDependencies": {
+                "vite": "^2.6.0 || 3 || 4"
+            }
+        },
         "node_modules/vite/node_modules/rollup": {
             "version": "3.21.6",
             "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.6.tgz",
             "integrity": "sha512-SXIICxvxQxR3D4dp/3LDHZIJPC8a4anKMHd4E3Jiz2/JnY+2bEjqrOokAauc5ShGVNFHlEFjBXAXlaxkJqIqSg==",
-            "dev": true,
             "bin": {
                 "rollup": "dist/bin/rollup"
             },
@@ -7326,8 +7563,7 @@
         "node_modules/yallist": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-            "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-            "peer": true
+            "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
         },
         "node_modules/yaml": {
             "version": "1.10.2",
@@ -7370,4 +7606,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 6315deb05..9fffaca0b 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -32,6 +32,7 @@
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
         "uuid": "^9.0.0",
+        "vite-plugin-svgr": "^3.2.0",
         "web-vitals": "^2.1.4"
     },
     "scripts": {
@@ -77,4 +78,4 @@
         "typescript": "^5.0.2",
         "vite": "^4.3.5"
     }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 96890d76e..9d5ad3128 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -30,7 +30,8 @@ export default function GenericNode({
   const showError = useRef(true);
   const { types, deleteNode } = useContext(typesContext);
   const { openPopUp } = useContext(PopUpContext);
-  const Icon = nodeIcons[types[data.type]];
+
+  const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]];
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
   const [isValid, setIsValid] = useState(false);
@@ -90,13 +91,13 @@ export default function GenericNode({
     <div
       className={classNames(
         selected ? "border border-blue-500" : "border dark:border-gray-700",
-        "prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
+        "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
       )}
     >
-      <div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
-        <div className="w-full flex items-center truncate gap-2 text-lg">
+      <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-gray-50 p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
+        <div className="flex w-full items-center gap-2 truncate text-lg">
           <Icon
-            className="w-10 h-10 p-1 rounded"
+            className="h-10 w-10 rounded p-1"
             style={{
               color: nodeColors[types[data.type]] ?? nodeColors.unknown,
             }}
@@ -116,29 +117,29 @@ export default function GenericNode({
                 )
               }
             >
-              <div className="relative w-5 h-5">
+              <div className="relative h-5 w-5">
                 <CheckCircleIcon
                   className={classNames(
                     validationStatus && validationStatus.valid
                       ? "text-green-500 opacity-100"
-                      : "text-green-500 opacity-0 animate-spin",
-                    "absolute w-5 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      : "animate-spin text-green-500 opacity-0",
+                    "absolute w-5 transition-all duration-200 ease-in-out hover:text-gray-500 hover:dark:text-gray-300"
                   )}
                 />
                 <ExclamationCircleIcon
                   className={classNames(
                     validationStatus && !validationStatus.valid
                       ? "text-red-500 opacity-100"
-                      : "text-red-500 opacity-0 animate-spin",
-                    "w-5 absolute hover:text-gray-500 hover:dark:text-gray-600 transition-all ease-in-out duration-200"
+                      : "animate-spin text-red-500 opacity-0",
+                    "absolute w-5 transition-all duration-200 ease-in-out hover:text-gray-500 hover:dark:text-gray-600"
                   )}
                 />
                 <EllipsisHorizontalCircleIcon
                   className={classNames(
                     !validationStatus
                       ? "text-yellow-500 opacity-100"
-                      : "text-yellow-500 opacity-0 animate-spin",
-                    "w-5 absolute hover:text-gray-500 hover:dark:text-gray-600 transition-all ease-in-out duration-300"
+                      : "animate-spin text-yellow-500 opacity-0",
+                    "absolute w-5 transition-all duration-300 ease-in-out hover:text-gray-500 hover:dark:text-gray-600"
                   )}
                 />
               </div>
@@ -153,7 +154,7 @@ export default function GenericNode({
               openPopUp(<NodeModal data={data} />);
             }}
           >
-            <div className=" absolute text-red-600 -top-2 -right-1">
+            <div className=" absolute -right-1 -top-2 text-red-600">
               {Object.keys(data.node.template).some(
                 (t) =>
                   data.node.template[t].advanced &&
@@ -170,7 +171,7 @@ export default function GenericNode({
                 )
                   ? ""
                   : "hidden",
-                "w-6 h-6  dark:text-gray-300  hover:animate-spin"
+                "h-6 w-6  hover:animate-spin  dark:text-gray-300"
               )}
             ></Cog6ToothIcon>
           </button>
@@ -179,13 +180,13 @@ export default function GenericNode({
               deleteNode(data.id);
             }}
           >
-            <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-300 dark:hover:text-red-500"></TrashIcon>
+            <TrashIcon className="h-6 w-6 hover:text-red-500 dark:text-gray-300 dark:hover:text-red-500"></TrashIcon>
           </button>
         </div>
       </div>
 
-      <div className="w-full h-full py-5">
-        <div className="w-full text-gray-500 dark:text-gray-300 px-5 pb-3 text-sm">
+      <div className="h-full w-full py-5">
+        <div className="w-full px-5 pb-3 text-sm text-gray-500 dark:text-gray-300">
           {data.node.description}
         </div>
 
@@ -247,7 +248,7 @@ export default function GenericNode({
           <div
             className={classNames(
               Object.keys(data.node.template).length < 1 ? "hidden" : "",
-              "w-full flex justify-center"
+              "flex w-full justify-center"
             )}
           >
             {" "}
diff --git a/src/frontend/src/icons/ChromaIcon/chroma.svg b/src/frontend/src/icons/ChromaIcon/chroma.svg
new file mode 100644
index 000000000..64090685b
--- /dev/null
+++ b/src/frontend/src/icons/ChromaIcon/chroma.svg
@@ -0,0 +1,7 @@
+<svg width="209" height="135" viewBox="0 0 209 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="136.019" cy="67.2304" rx="66.6667" ry="64" fill="#FFDE2D"/>
+<ellipse cx="69.352" cy="67.2304" rx="66.6667" ry="64" fill="#327EFF"/>
+<path d="M2.68528 67.2304C2.68527 31.8842 32.5329 3.23047 69.3519 3.23047L69.3519 67.2304L2.68528 67.2304Z" fill="#327EFF"/>
+<path d="M136.019 67.2305C136.019 102.577 106.171 131.23 69.3519 131.23L69.3519 67.2305L136.019 67.2305Z" fill="#FF6446"/>
+<path d="M69.352 67.2304C69.352 31.8842 99.1997 3.23047 136.019 3.23047L136.019 67.2304L69.352 67.2304Z" fill="#FF6446"/>
+</svg>
diff --git a/src/frontend/src/icons/ChromaIcon/index.tsx b/src/frontend/src/icons/ChromaIcon/index.tsx
new file mode 100644
index 000000000..045108535
--- /dev/null
+++ b/src/frontend/src/icons/ChromaIcon/index.tsx
@@ -0,0 +1,12 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as ChromaSVG } from "./chroma.svg";
+
+const ChromaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return (
+      <ChromaSVG ref={ref} {...props} />
+    );
+  }
+);
+
+export default ChromaIcon;
diff --git a/src/frontend/src/icons/index.tsx b/src/frontend/src/icons/index.tsx
new file mode 100644
index 000000000..2b01bf567
--- /dev/null
+++ b/src/frontend/src/icons/index.tsx
@@ -0,0 +1 @@
+export { default as ChromaIcon } from "./ChromaIcon";
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index 39f563827..172b37733 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-
+import svgr from "vite-plugin-svgr";
 const apiRoutes = [
   "/all",
   "/predict",
@@ -28,7 +28,7 @@ export default defineConfig(() => {
     build: {
       outDir: "build",
     },
-    plugins: [react()],
+    plugins: [react(), svgr()],
     server: {
       port: 3000,
       proxy: {

From fbe6e2beb85c84f1cda609467960db51fd4a08cd Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 11:57:16 -0300
Subject: [PATCH 02/12] Format

---
 src/frontend/src/utils.ts | 786 +++++++++++++++++++-------------------
 1 file changed, 392 insertions(+), 394 deletions(-)

diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 72e44f781..d464290e1 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -1,20 +1,20 @@
 import {
-	RocketLaunchIcon,
-	LinkIcon,
-	CpuChipIcon,
-	LightBulbIcon,
-	CommandLineIcon,
-	WrenchScrewdriverIcon,
-	WrenchIcon,
-	ComputerDesktopIcon,
-	Bars3CenterLeftIcon,
-	GiftIcon,
-	PaperClipIcon,
-	QuestionMarkCircleIcon,
-	FingerPrintIcon,
-	ScissorsIcon,
-	CircleStackIcon,
-	Squares2X2Icon,
+  RocketLaunchIcon,
+  LinkIcon,
+  CpuChipIcon,
+  LightBulbIcon,
+  CommandLineIcon,
+  WrenchScrewdriverIcon,
+  WrenchIcon,
+  ComputerDesktopIcon,
+  Bars3CenterLeftIcon,
+  GiftIcon,
+  PaperClipIcon,
+  QuestionMarkCircleIcon,
+  FingerPrintIcon,
+  ScissorsIcon,
+  CircleStackIcon,
+  Squares2X2Icon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 import { FlowType } from "./types/flow";
@@ -22,475 +22,473 @@ import { APITemplateType, TemplateVariableType } from "./types/api";
 import _ from "lodash";
 
 export function classNames(...classes: Array<string>) {
-	return classes.filter(Boolean).join(" ");
+  return classes.filter(Boolean).join(" ");
 }
 
 export const textColors = {
-	white: "text-white",
-	red: "text-red-700",
-	orange: "text-orange-700",
-	amber: "text-amber-700",
-	yellow: "text-yellow-700",
-	lime: "text-lime-700",
-	green: "text-green-700",
-	emerald: "text-emerald-700",
-	teal: "text-teal-700",
-	cyan: "text-cyan-700",
-	sky: "text-sky-700",
-	blue: "text-blue-700",
-	indigo: "text-indigo-700",
-	violet: "text-violet-700",
-	purple: "text-purple-700",
-	fuchsia: "text-fuchsia-700",
-	pink: "text-pink-700",
-	rose: "text-rose-700",
-	black: "text-black-700",
-	gray: "text-gray-700",
+  white: "text-white",
+  red: "text-red-700",
+  orange: "text-orange-700",
+  amber: "text-amber-700",
+  yellow: "text-yellow-700",
+  lime: "text-lime-700",
+  green: "text-green-700",
+  emerald: "text-emerald-700",
+  teal: "text-teal-700",
+  cyan: "text-cyan-700",
+  sky: "text-sky-700",
+  blue: "text-blue-700",
+  indigo: "text-indigo-700",
+  violet: "text-violet-700",
+  purple: "text-purple-700",
+  fuchsia: "text-fuchsia-700",
+  pink: "text-pink-700",
+  rose: "text-rose-700",
+  black: "text-black-700",
+  gray: "text-gray-700",
 };
 
 export const borderLColors = {
-	white: "border-l-white",
-	red: "border-l-red-500",
-	orange: "border-l-orange-500",
-	amber: "border-l-amber-500",
-	yellow: "border-l-yellow-500",
-	lime: "border-l-lime-500",
-	green: "border-l-green-500",
-	emerald: "border-l-emerald-500",
-	teal: "border-l-teal-500",
-	cyan: "border-l-cyan-500",
-	sky: "border-l-sky-500",
-	blue: "border-l-blue-500",
-	indigo: "border-l-indigo-500",
-	violet: "border-l-violet-500",
-	purple: "border-l-purple-500",
-	fuchsia: "border-l-fuchsia-500",
-	pink: "border-l-pink-500",
-	rose: "border-l-rose-500",
-	black: "border-l-black-500",
-	gray: "border-l-gray-500",
+  white: "border-l-white",
+  red: "border-l-red-500",
+  orange: "border-l-orange-500",
+  amber: "border-l-amber-500",
+  yellow: "border-l-yellow-500",
+  lime: "border-l-lime-500",
+  green: "border-l-green-500",
+  emerald: "border-l-emerald-500",
+  teal: "border-l-teal-500",
+  cyan: "border-l-cyan-500",
+  sky: "border-l-sky-500",
+  blue: "border-l-blue-500",
+  indigo: "border-l-indigo-500",
+  violet: "border-l-violet-500",
+  purple: "border-l-purple-500",
+  fuchsia: "border-l-fuchsia-500",
+  pink: "border-l-pink-500",
+  rose: "border-l-rose-500",
+  black: "border-l-black-500",
+  gray: "border-l-gray-500",
 };
 
 export const nodeColors: { [char: string]: string } = {
-	prompts: "#4367BF",
-	llms: "#6344BE",
-	chains: "#FE7500",
-	agents: "#903BBE",
-	tools: "#FF3434",
-	memories: "#F5B85A",
-	advanced: "#000000",
-	chat: "#198BF6",
-	thought: "#272541",
-	embeddings: "#42BAA7",
-	documentloaders: "#7AAE42",
-	vectorstores: "#AA8742",
-	textsplitters: "#B47CB5",
-	toolkits: "#DB2C2C",
-	wrappers: "#E6277A",
-	utilities: "#31A3CC",
-	unknown: "#9CA3AF",
+  prompts: "#4367BF",
+  llms: "#6344BE",
+  chains: "#FE7500",
+  agents: "#903BBE",
+  tools: "#FF3434",
+  memories: "#F5B85A",
+  advanced: "#000000",
+  chat: "#198BF6",
+  thought: "#272541",
+  embeddings: "#42BAA7",
+  documentloaders: "#7AAE42",
+  vectorstores: "#AA8742",
+  textsplitters: "#B47CB5",
+  toolkits: "#DB2C2C",
+  wrappers: "#E6277A",
+  utilities: "#31A3CC",
+  unknown: "#9CA3AF",
 };
 
 export const nodeNames: { [char: string]: string } = {
-	prompts: "Prompts",
-	llms: "LLMs",
-	chains: "Chains",
-	agents: "Agents",
-	tools: "Tools",
-	memories: "Memories",
-	advanced: "Advanced",
-	chat: "Chat",
-	embeddings: "Embeddings",
-	documentloaders: "Loaders",
-	vectorstores: "Vector Stores",
-	toolkits: "Toolkits",
-	wrappers: "Wrappers",
-	textsplitters: "Text Splitters",
-	utilities: "Utilities",
-	unknown: "Unknown",
+  prompts: "Prompts",
+  llms: "LLMs",
+  chains: "Chains",
+  agents: "Agents",
+  tools: "Tools",
+  memories: "Memories",
+  advanced: "Advanced",
+  chat: "Chat",
+  embeddings: "Embeddings",
+  documentloaders: "Loaders",
+  vectorstores: "Vector Stores",
+  toolkits: "Toolkits",
+  wrappers: "Wrappers",
+  textsplitters: "Text Splitters",
+  utilities: "Utilities",
+  unknown: "Unknown",
 };
 
 export const nodeIcons: {
-	[char: string]: React.ForwardRefExoticComponent<
-		React.SVGProps<SVGSVGElement>
-	>;
+  [char: string]: React.ForwardRefExoticComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
 } = {
-	agents: RocketLaunchIcon,
-	chains: LinkIcon,
-	memories: CpuChipIcon,
-	llms: LightBulbIcon,
-	prompts: CommandLineIcon,
-	tools: WrenchIcon,
-	advanced: ComputerDesktopIcon,
-	chat: Bars3CenterLeftIcon,
-	embeddings: FingerPrintIcon,
-	documentloaders: PaperClipIcon,
-	vectorstores: CircleStackIcon,
-	toolkits: WrenchScrewdriverIcon,
-	textsplitters: ScissorsIcon,
-	wrappers: GiftIcon,
-	utilities: Squares2X2Icon,
-	unknown: QuestionMarkCircleIcon,
+  agents: RocketLaunchIcon,
+  chains: LinkIcon,
+  memories: CpuChipIcon,
+  llms: LightBulbIcon,
+  prompts: CommandLineIcon,
+  tools: WrenchIcon,
+  advanced: ComputerDesktopIcon,
+  chat: Bars3CenterLeftIcon,
+  embeddings: FingerPrintIcon,
+  documentloaders: PaperClipIcon,
+  vectorstores: CircleStackIcon,
+  toolkits: WrenchScrewdriverIcon,
+  textsplitters: ScissorsIcon,
+  wrappers: GiftIcon,
+  utilities: Squares2X2Icon,
+  unknown: QuestionMarkCircleIcon,
 };
 
 export const bgColors = {
-	white: "bg-white",
-	red: "bg-red-100",
-	orange: "bg-orange-100",
-	amber: "bg-amber-100",
-	yellow: "bg-yellow-100",
-	lime: "bg-lime-100",
-	green: "bg-green-100",
-	emerald: "bg-emerald-100",
-	teal: "bg-teal-100",
-	cyan: "bg-cyan-100",
-	sky: "bg-sky-100",
-	blue: "bg-blue-100",
-	indigo: "bg-indigo-100",
-	violet: "bg-violet-100",
-	purple: "bg-purple-100",
-	fuchsia: "bg-fuchsia-100",
-	pink: "bg-pink-100",
-	rose: "bg-rose-100",
-	black: "bg-black-100",
-	gray: "bg-gray-100",
+  white: "bg-white",
+  red: "bg-red-100",
+  orange: "bg-orange-100",
+  amber: "bg-amber-100",
+  yellow: "bg-yellow-100",
+  lime: "bg-lime-100",
+  green: "bg-green-100",
+  emerald: "bg-emerald-100",
+  teal: "bg-teal-100",
+  cyan: "bg-cyan-100",
+  sky: "bg-sky-100",
+  blue: "bg-blue-100",
+  indigo: "bg-indigo-100",
+  violet: "bg-violet-100",
+  purple: "bg-purple-100",
+  fuchsia: "bg-fuchsia-100",
+  pink: "bg-pink-100",
+  rose: "bg-rose-100",
+  black: "bg-black-100",
+  gray: "bg-gray-100",
 };
 
 export const bgColorsHover = {
-	white: "hover:bg-white",
-	black: "hover:bg-black-50",
-	gray: "hover:bg-gray-50",
-	red: "hover:bg-red-50",
-	orange: "hover:bg-orange-50",
-	amber: "hover:bg-amber-50",
-	yellow: "hover:bg-yellow-50",
-	lime: "hover:bg-lime-50",
-	green: "hover:bg-green-50",
-	emerald: "hover:bg-emerald-50",
-	teal: "hover:bg-teal-50",
-	cyan: "hover:bg-cyan-50",
-	sky: "hover:bg-sky-50",
-	blue: "hover:bg-blue-50",
-	indigo: "hover:bg-indigo-50",
-	violet: "hover:bg-violet-50",
-	purple: "hover:bg-purple-50",
-	fuchsia: "hover:bg-fuchsia-50",
-	pink: "hover:bg-pink-50",
-	rose: "hover:bg-rose-50",
+  white: "hover:bg-white",
+  black: "hover:bg-black-50",
+  gray: "hover:bg-gray-50",
+  red: "hover:bg-red-50",
+  orange: "hover:bg-orange-50",
+  amber: "hover:bg-amber-50",
+  yellow: "hover:bg-yellow-50",
+  lime: "hover:bg-lime-50",
+  green: "hover:bg-green-50",
+  emerald: "hover:bg-emerald-50",
+  teal: "hover:bg-teal-50",
+  cyan: "hover:bg-cyan-50",
+  sky: "hover:bg-sky-50",
+  blue: "hover:bg-blue-50",
+  indigo: "hover:bg-indigo-50",
+  violet: "hover:bg-violet-50",
+  purple: "hover:bg-purple-50",
+  fuchsia: "hover:bg-fuchsia-50",
+  pink: "hover:bg-pink-50",
+  rose: "hover:bg-rose-50",
 };
 
 export const textColorsHex = {
-	red: "rgb(185 28 28)",
-	orange: "rgb(194 65 12)",
-	amber: "rgb(180 83 9)",
-	yellow: "rgb(161 98 7)",
-	lime: "rgb(77 124 15)",
-	green: "rgb(21 128 61)",
-	emerald: "rgb(4 120 87)",
-	teal: "rgb(15 118 110)",
-	cyan: "rgb(14 116 144)",
-	sky: "rgb(3 105 161)",
-	blue: "rgb(29 78 216)",
-	indigo: "rgb(67 56 202)",
-	violet: "rgb(109 40 217)",
-	purple: "rgb(126 34 206)",
-	fuchsia: "rgb(162 28 175)",
-	pink: "rgb(190 24 93)",
-	rose: "rgb(190 18 60)",
+  red: "rgb(185 28 28)",
+  orange: "rgb(194 65 12)",
+  amber: "rgb(180 83 9)",
+  yellow: "rgb(161 98 7)",
+  lime: "rgb(77 124 15)",
+  green: "rgb(21 128 61)",
+  emerald: "rgb(4 120 87)",
+  teal: "rgb(15 118 110)",
+  cyan: "rgb(14 116 144)",
+  sky: "rgb(3 105 161)",
+  blue: "rgb(29 78 216)",
+  indigo: "rgb(67 56 202)",
+  violet: "rgb(109 40 217)",
+  purple: "rgb(126 34 206)",
+  fuchsia: "rgb(162 28 175)",
+  pink: "rgb(190 24 93)",
+  rose: "rgb(190 18 60)",
 };
 
 export const bgColorsHex = {
-	red: "rgb(254 226 226)",
-	orange: "rgb(255 237 213)",
-	amber: "rgb(254 243 199)",
-	yellow: "rgb(254 249 195)",
-	lime: "rgb(236 252 203)",
-	green: "rgb(220 252 231)",
-	emerald: "rgb(209 250 229)",
-	teal: "rgb(204 251 241)",
-	cyan: "rgb(207 250 254)",
-	sky: "rgb(224 242 254)",
-	blue: "rgb(219 234 254)",
-	indigo: "rgb(224 231 255)",
-	violet: "rgb(237 233 254)",
-	purple: "rgb(243 232 255)",
-	fuchsia: "rgb(250 232 255)",
-	pink: "rgb(252 231 243)",
-	rose: "rgb(255 228 230)",
+  red: "rgb(254 226 226)",
+  orange: "rgb(255 237 213)",
+  amber: "rgb(254 243 199)",
+  yellow: "rgb(254 249 195)",
+  lime: "rgb(236 252 203)",
+  green: "rgb(220 252 231)",
+  emerald: "rgb(209 250 229)",
+  teal: "rgb(204 251 241)",
+  cyan: "rgb(207 250 254)",
+  sky: "rgb(224 242 254)",
+  blue: "rgb(219 234 254)",
+  indigo: "rgb(224 231 255)",
+  violet: "rgb(237 233 254)",
+  purple: "rgb(243 232 255)",
+  fuchsia: "rgb(250 232 255)",
+  pink: "rgb(252 231 243)",
+  rose: "rgb(255 228 230)",
 };
 
 export const taskTypeMap: { [key: string]: string } = {
-	MULTICLASS_CLASSIFICATION: "Multiclass Classification",
+  MULTICLASS_CLASSIFICATION: "Multiclass Classification",
 };
 
 const charWidths: { [char: string]: number } = {
-	" ": 0.2,
-	"!": 0.2,
-	'"': 0.3,
-	"#": 0.5,
-	$: 0.5,
-	"%": 0.5,
-	"&": 0.5,
-	"(": 0.2,
-	")": 0.2,
-	"*": 0.5,
-	"+": 0.5,
-	",": 0.2,
-	"-": 0.2,
-	".": 0.1,
-	"/": 0.5,
-	":": 0.2,
-	";": 0.2,
-	"<": 0.5,
-	"=": 0.5,
-	">": 0.5,
-	"?": 0.2,
-	"@": 0.5,
-	"[": 0.2,
-	"\\": 0.5,
-	"]": 0.2,
-	"^": 0.5,
-	_: 0.2,
-	"`": 0.5,
-	"{": 0.2,
-	"|": 0.2,
-	"}": 0.2,
-	"~": 0.5,
+  " ": 0.2,
+  "!": 0.2,
+  '"': 0.3,
+  "#": 0.5,
+  $: 0.5,
+  "%": 0.5,
+  "&": 0.5,
+  "(": 0.2,
+  ")": 0.2,
+  "*": 0.5,
+  "+": 0.5,
+  ",": 0.2,
+  "-": 0.2,
+  ".": 0.1,
+  "/": 0.5,
+  ":": 0.2,
+  ";": 0.2,
+  "<": 0.5,
+  "=": 0.5,
+  ">": 0.5,
+  "?": 0.2,
+  "@": 0.5,
+  "[": 0.2,
+  "\\": 0.5,
+  "]": 0.2,
+  "^": 0.5,
+  _: 0.2,
+  "`": 0.5,
+  "{": 0.2,
+  "|": 0.2,
+  "}": 0.2,
+  "~": 0.5,
 };
 
 for (let i = 65; i <= 90; i++) {
-	charWidths[String.fromCharCode(i)] = 0.6;
+  charWidths[String.fromCharCode(i)] = 0.6;
 }
 for (let i = 97; i <= 122; i++) {
-	charWidths[String.fromCharCode(i)] = 0.5;
+  charWidths[String.fromCharCode(i)] = 0.5;
 }
 
 export function measureTextWidth(text: string, fontSize: number) {
-	let wordWidth = 0;
-	for (let j = 0; j < text.length; j++) {
-		let char = text[j];
-		let charWidth = charWidths[char] || 0.5;
-		wordWidth += charWidth * fontSize;
-	}
-	return wordWidth;
+  let wordWidth = 0;
+  for (let j = 0; j < text.length; j++) {
+    let char = text[j];
+    let charWidth = charWidths[char] || 0.5;
+    wordWidth += charWidth * fontSize;
+  }
+  return wordWidth;
 }
 
 export function measureTextHeight(
-	text: string,
-	width: number,
-	fontSize: number
+  text: string,
+  width: number,
+  fontSize: number
 ) {
-	const charHeight = fontSize;
-	const lineHeight = charHeight * 1.5;
-	const words = text.split(" ");
-	let lineWidth = 0;
-	let totalHeight = 0;
-	for (let i = 0; i < words.length; i++) {
-		let word = words[i];
-		let wordWidth = measureTextWidth(word, fontSize);
-		if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
-			lineWidth += wordWidth + charWidths[" "] * fontSize;
-		} else {
-			totalHeight += lineHeight;
-			lineWidth = wordWidth;
-		}
-	}
-	totalHeight += lineHeight;
-	return totalHeight;
+  const charHeight = fontSize;
+  const lineHeight = charHeight * 1.5;
+  const words = text.split(" ");
+  let lineWidth = 0;
+  let totalHeight = 0;
+  for (let i = 0; i < words.length; i++) {
+    let word = words[i];
+    let wordWidth = measureTextWidth(word, fontSize);
+    if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
+      lineWidth += wordWidth + charWidths[" "] * fontSize;
+    } else {
+      totalHeight += lineHeight;
+      lineWidth = wordWidth;
+    }
+  }
+  totalHeight += lineHeight;
+  return totalHeight;
 }
 
 export function toCamelCase(str: string) {
-	return str
-		.split(" ")
-		.map((word, index) =>
-			index === 0
-				? word.toLowerCase()
-				: word[0].toUpperCase() + word.slice(1).toLowerCase()
-		)
-		.join("");
+  return str
+    .split(" ")
+    .map((word, index) =>
+      index === 0
+        ? word.toLowerCase()
+        : word[0].toUpperCase() + word.slice(1).toLowerCase()
+    )
+    .join("");
 }
 export function toFirstUpperCase(str: string) {
-	return str
-		.split(" ")
-		.map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
-		.join("");
+  return str
+    .split(" ")
+    .map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
+    .join("");
 }
 
 export function snakeToSpaces(str: string) {
-	let result = str
-		.split("_")
-		.join(" ");
+  let result = str.split("_").join(" ");
 
-	return result
+  return result;
 }
 
 export function toNormalCase(str: string) {
-	let result = str
-		.split("_")
-		.map((word, index) => {
-			if (index === 0) {
-				return word[0].toUpperCase() + word.slice(1).toLowerCase();
-			}
-			return word.toLowerCase();
-		})
-		.join(" ");
+  let result = str
+    .split("_")
+    .map((word, index) => {
+      if (index === 0) {
+        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+      }
+      return word.toLowerCase();
+    })
+    .join(" ");
 
-	return result
-		.split("-")
-		.map((word, index) => {
-			if (index === 0) {
-				return word[0].toUpperCase() + word.slice(1).toLowerCase();
-			}
-			return word.toLowerCase();
-		})
-		.join(" ");
+  return result
+    .split("-")
+    .map((word, index) => {
+      if (index === 0) {
+        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+      }
+      return word.toLowerCase();
+    })
+    .join(" ");
 }
 
 export function normalCaseToSnakeCase(str: string) {
-	return str
-		.split(" ")
-		.map((word, index) => {
-			if (index === 0) {
-				return word[0].toUpperCase() + word.slice(1).toLowerCase();
-			}
-			return word.toLowerCase();
-		})
-		.join("_");
+  return str
+    .split(" ")
+    .map((word, index) => {
+      if (index === 0) {
+        return word[0].toUpperCase() + word.slice(1).toLowerCase();
+      }
+      return word.toLowerCase();
+    })
+    .join("_");
 }
 
 export function roundNumber(x: number, decimals: number) {
-	return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
+  return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
 }
 
 export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
-	const sourceId = edge.source;
-	const targetId = edge.target;
-	const connectedNodes = nodes.filter(
-		(node) => node.id === targetId || node.id === sourceId
-	);
-	return connectedNodes;
+  const sourceId = edge.source;
+  const targetId = edge.target;
+  const connectedNodes = nodes.filter(
+    (node) => node.id === targetId || node.id === sourceId
+  );
+  return connectedNodes;
 }
 
 export function isValidConnection(
-	{ source, target, sourceHandle, targetHandle }: Connection,
-	reactFlowInstance: ReactFlowInstance
+  { source, target, sourceHandle, targetHandle }: Connection,
+  reactFlowInstance: ReactFlowInstance
 ) {
-	if (
-		sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
-		sourceHandle
-			.split("|")
-			.slice(2)
-			.some((t) => t === targetHandle.split("|")[0]) ||
-		targetHandle.split("|")[0] === "str"
-	) {
-		let targetNode = reactFlowInstance.getNode(target).data.node;
-		if (!targetNode) {
-			if (
-				!reactFlowInstance
-					.getEdges()
-					.find((e) => e.targetHandle === targetHandle)
-			) {
-				return true;
-			}
-		} else if (
-			(!targetNode.template[targetHandle.split("|")[1]].list &&
-				!reactFlowInstance
-					.getEdges()
-					.find((e) => e.targetHandle === targetHandle)) ||
-			targetNode.template[targetHandle.split("|")[1]].list
-		) {
-			return true;
-		}
-	}
-	return false;
+  if (
+    sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
+    sourceHandle
+      .split("|")
+      .slice(2)
+      .some((t) => t === targetHandle.split("|")[0]) ||
+    targetHandle.split("|")[0] === "str"
+  ) {
+    let targetNode = reactFlowInstance.getNode(target).data.node;
+    if (!targetNode) {
+      if (
+        !reactFlowInstance
+          .getEdges()
+          .find((e) => e.targetHandle === targetHandle)
+      ) {
+        return true;
+      }
+    } else if (
+      (!targetNode.template[targetHandle.split("|")[1]].list &&
+        !reactFlowInstance
+          .getEdges()
+          .find((e) => e.targetHandle === targetHandle)) ||
+      targetNode.template[targetHandle.split("|")[1]].list
+    ) {
+      return true;
+    }
+  }
+  return false;
 }
 
 export function removeApiKeys(flow: FlowType): FlowType {
-	let cleanFLow = _.cloneDeep(flow);
-	cleanFLow.data.nodes.forEach((node) => {
-		for (const key in node.data.node.template) {
-			if (key.includes("api")) {
-				node.data.node.template[key].value = "";
-			}
-		}
-	});
-	return cleanFLow;
+  let cleanFLow = _.cloneDeep(flow);
+  cleanFLow.data.nodes.forEach((node) => {
+    for (const key in node.data.node.template) {
+      if (key.includes("api")) {
+        node.data.node.template[key].value = "";
+      }
+    }
+  });
+  return cleanFLow;
 }
 
 export function updateObject<T extends Record<string, any>>(
-	reference: T,
-	objectToUpdate: T
+  reference: T,
+  objectToUpdate: T
 ): T {
-	let clonedObject = _.cloneDeep(objectToUpdate);
-	// Loop through each key in the object to update
-	for (const key in clonedObject) {
-		// If the key is not in the reference object, delete it
-		if (!(key in reference)) {
-			delete clonedObject[key];
-		}
-	}
-	// Loop through each key in the reference object
-	for (const key in reference) {
-		// If the key is not in the object to update, add it
-		if (!(key in clonedObject)) {
-			clonedObject[key] = reference[key];
-		}
-	}
-	return clonedObject;
+  let clonedObject = _.cloneDeep(objectToUpdate);
+  // Loop through each key in the object to update
+  for (const key in clonedObject) {
+    // If the key is not in the reference object, delete it
+    if (!(key in reference)) {
+      delete clonedObject[key];
+    }
+  }
+  // Loop through each key in the reference object
+  for (const key in reference) {
+    // If the key is not in the object to update, add it
+    if (!(key in clonedObject)) {
+      clonedObject[key] = reference[key];
+    }
+  }
+  return clonedObject;
 }
 
 export function debounce(func, wait) {
-	let timeout;
-	return function (...args) {
-		const context = this;
-		clearTimeout(timeout);
-		timeout = setTimeout(() => func.apply(context, args), wait);
-	};
+  let timeout;
+  return function (...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
 }
 
 export function updateTemplate(
-	reference: APITemplateType,
-	objectToUpdate: APITemplateType
+  reference: APITemplateType,
+  objectToUpdate: APITemplateType
 ): APITemplateType {
-	let clonedObject: APITemplateType = _.cloneDeep(reference);
+  let clonedObject: APITemplateType = _.cloneDeep(reference);
 
-	// Loop through each key in the reference object
-	for (const key in clonedObject) {
-		// If the key is not in the object to update, add it
-		if (objectToUpdate[key] && objectToUpdate[key].value) {
-			clonedObject[key].value = objectToUpdate[key].value;
-		}
-	}
-	return clonedObject;
+  // Loop through each key in the reference object
+  for (const key in clonedObject) {
+    // If the key is not in the object to update, add it
+    if (objectToUpdate[key] && objectToUpdate[key].value) {
+      clonedObject[key].value = objectToUpdate[key].value;
+    }
+  }
+  return clonedObject;
 }
 
 interface languageMap {
-	[key: string]: string | undefined;
+  [key: string]: string | undefined;
 }
 
 export const programmingLanguages: languageMap = {
-	javascript: ".js",
-	python: ".py",
-	java: ".java",
-	c: ".c",
-	cpp: ".cpp",
-	"c++": ".cpp",
-	"c#": ".cs",
-	ruby: ".rb",
-	php: ".php",
-	swift: ".swift",
-	"objective-c": ".m",
-	kotlin: ".kt",
-	typescript: ".ts",
-	go: ".go",
-	perl: ".pl",
-	rust: ".rs",
-	scala: ".scala",
-	haskell: ".hs",
-	lua: ".lua",
-	shell: ".sh",
-	sql: ".sql",
-	html: ".html",
-	css: ".css",
-	// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+  javascript: ".js",
+  python: ".py",
+  java: ".java",
+  c: ".c",
+  cpp: ".cpp",
+  "c++": ".cpp",
+  "c#": ".cs",
+  ruby: ".rb",
+  php: ".php",
+  swift: ".swift",
+  "objective-c": ".m",
+  kotlin: ".kt",
+  typescript: ".ts",
+  go: ".go",
+  perl: ".pl",
+  rust: ".rs",
+  scala: ".scala",
+  haskell: ".hs",
+  lua: ".lua",
+  shell: ".sh",
+  sql: ".sql",
+  html: ".html",
+  css: ".css",
+  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
 };

From 3f12363adc7af8ccbf68d342f4a82ecabf045eaa Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 11:58:15 -0300
Subject: [PATCH 03/12] Format and add ChromaIcon

---
 src/frontend/src/utils.ts | 788 +++++++++++++++++++-------------------
 1 file changed, 396 insertions(+), 392 deletions(-)

diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index d464290e1..2f7c91f7c 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -1,494 +1,498 @@
 import {
-  RocketLaunchIcon,
-  LinkIcon,
-  CpuChipIcon,
-  LightBulbIcon,
-  CommandLineIcon,
-  WrenchScrewdriverIcon,
-  WrenchIcon,
-  ComputerDesktopIcon,
-  Bars3CenterLeftIcon,
-  GiftIcon,
-  PaperClipIcon,
-  QuestionMarkCircleIcon,
-  FingerPrintIcon,
-  ScissorsIcon,
-  CircleStackIcon,
-  Squares2X2Icon,
+	RocketLaunchIcon,
+	LinkIcon,
+	CpuChipIcon,
+	LightBulbIcon,
+	CommandLineIcon,
+	WrenchScrewdriverIcon,
+	WrenchIcon,
+	ComputerDesktopIcon,
+	Bars3CenterLeftIcon,
+	GiftIcon,
+	PaperClipIcon,
+	QuestionMarkCircleIcon,
+	FingerPrintIcon,
+	ScissorsIcon,
+	CircleStackIcon,
+	Squares2X2Icon,
 } from "@heroicons/react/24/outline";
 import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
 import { FlowType } from "./types/flow";
 import { APITemplateType, TemplateVariableType } from "./types/api";
 import _ from "lodash";
+import { ChromaIcon } from "./icons";
 
 export function classNames(...classes: Array<string>) {
-  return classes.filter(Boolean).join(" ");
+	return classes.filter(Boolean).join(" ");
 }
 
 export const textColors = {
-  white: "text-white",
-  red: "text-red-700",
-  orange: "text-orange-700",
-  amber: "text-amber-700",
-  yellow: "text-yellow-700",
-  lime: "text-lime-700",
-  green: "text-green-700",
-  emerald: "text-emerald-700",
-  teal: "text-teal-700",
-  cyan: "text-cyan-700",
-  sky: "text-sky-700",
-  blue: "text-blue-700",
-  indigo: "text-indigo-700",
-  violet: "text-violet-700",
-  purple: "text-purple-700",
-  fuchsia: "text-fuchsia-700",
-  pink: "text-pink-700",
-  rose: "text-rose-700",
-  black: "text-black-700",
-  gray: "text-gray-700",
+	white: "text-white",
+	red: "text-red-700",
+	orange: "text-orange-700",
+	amber: "text-amber-700",
+	yellow: "text-yellow-700",
+	lime: "text-lime-700",
+	green: "text-green-700",
+	emerald: "text-emerald-700",
+	teal: "text-teal-700",
+	cyan: "text-cyan-700",
+	sky: "text-sky-700",
+	blue: "text-blue-700",
+	indigo: "text-indigo-700",
+	violet: "text-violet-700",
+	purple: "text-purple-700",
+	fuchsia: "text-fuchsia-700",
+	pink: "text-pink-700",
+	rose: "text-rose-700",
+	black: "text-black-700",
+	gray: "text-gray-700",
 };
 
 export const borderLColors = {
-  white: "border-l-white",
-  red: "border-l-red-500",
-  orange: "border-l-orange-500",
-  amber: "border-l-amber-500",
-  yellow: "border-l-yellow-500",
-  lime: "border-l-lime-500",
-  green: "border-l-green-500",
-  emerald: "border-l-emerald-500",
-  teal: "border-l-teal-500",
-  cyan: "border-l-cyan-500",
-  sky: "border-l-sky-500",
-  blue: "border-l-blue-500",
-  indigo: "border-l-indigo-500",
-  violet: "border-l-violet-500",
-  purple: "border-l-purple-500",
-  fuchsia: "border-l-fuchsia-500",
-  pink: "border-l-pink-500",
-  rose: "border-l-rose-500",
-  black: "border-l-black-500",
-  gray: "border-l-gray-500",
+	white: "border-l-white",
+	red: "border-l-red-500",
+	orange: "border-l-orange-500",
+	amber: "border-l-amber-500",
+	yellow: "border-l-yellow-500",
+	lime: "border-l-lime-500",
+	green: "border-l-green-500",
+	emerald: "border-l-emerald-500",
+	teal: "border-l-teal-500",
+	cyan: "border-l-cyan-500",
+	sky: "border-l-sky-500",
+	blue: "border-l-blue-500",
+	indigo: "border-l-indigo-500",
+	violet: "border-l-violet-500",
+	purple: "border-l-purple-500",
+	fuchsia: "border-l-fuchsia-500",
+	pink: "border-l-pink-500",
+	rose: "border-l-rose-500",
+	black: "border-l-black-500",
+	gray: "border-l-gray-500",
 };
 
 export const nodeColors: { [char: string]: string } = {
-  prompts: "#4367BF",
-  llms: "#6344BE",
-  chains: "#FE7500",
-  agents: "#903BBE",
-  tools: "#FF3434",
-  memories: "#F5B85A",
-  advanced: "#000000",
-  chat: "#198BF6",
-  thought: "#272541",
-  embeddings: "#42BAA7",
-  documentloaders: "#7AAE42",
-  vectorstores: "#AA8742",
-  textsplitters: "#B47CB5",
-  toolkits: "#DB2C2C",
-  wrappers: "#E6277A",
-  utilities: "#31A3CC",
-  unknown: "#9CA3AF",
+	prompts: "#4367BF",
+	llms: "#6344BE",
+	chains: "#FE7500",
+	agents: "#903BBE",
+	tools: "#FF3434",
+	memories: "#F5B85A",
+	advanced: "#000000",
+	chat: "#198BF6",
+	thought: "#272541",
+	embeddings: "#42BAA7",
+	documentloaders: "#7AAE42",
+	vectorstores: "#AA8742",
+	textsplitters: "#B47CB5",
+	toolkits: "#DB2C2C",
+	wrappers: "#E6277A",
+	utilities: "#31A3CC",
+	unknown: "#9CA3AF",
 };
 
 export const nodeNames: { [char: string]: string } = {
-  prompts: "Prompts",
-  llms: "LLMs",
-  chains: "Chains",
-  agents: "Agents",
-  tools: "Tools",
-  memories: "Memories",
-  advanced: "Advanced",
-  chat: "Chat",
-  embeddings: "Embeddings",
-  documentloaders: "Loaders",
-  vectorstores: "Vector Stores",
-  toolkits: "Toolkits",
-  wrappers: "Wrappers",
-  textsplitters: "Text Splitters",
-  utilities: "Utilities",
-  unknown: "Unknown",
+	prompts: "Prompts",
+	llms: "LLMs",
+	chains: "Chains",
+	agents: "Agents",
+	tools: "Tools",
+	memories: "Memories",
+	advanced: "Advanced",
+	chat: "Chat",
+	embeddings: "Embeddings",
+	documentloaders: "Loaders",
+	vectorstores: "Vector Stores",
+	toolkits: "Toolkits",
+	wrappers: "Wrappers",
+	textsplitters: "Text Splitters",
+	utilities: "Utilities",
+	unknown: "Unknown",
 };
 
 export const nodeIcons: {
-  [char: string]: React.ForwardRefExoticComponent<
-    React.SVGProps<SVGSVGElement>
-  >;
+	[char: string]: React.ForwardRefExoticComponent<
+		React.SVGProps<SVGSVGElement>
+	>;
 } = {
-  agents: RocketLaunchIcon,
-  chains: LinkIcon,
-  memories: CpuChipIcon,
-  llms: LightBulbIcon,
-  prompts: CommandLineIcon,
-  tools: WrenchIcon,
-  advanced: ComputerDesktopIcon,
-  chat: Bars3CenterLeftIcon,
-  embeddings: FingerPrintIcon,
-  documentloaders: PaperClipIcon,
-  vectorstores: CircleStackIcon,
-  toolkits: WrenchScrewdriverIcon,
-  textsplitters: ScissorsIcon,
-  wrappers: GiftIcon,
-  utilities: Squares2X2Icon,
-  unknown: QuestionMarkCircleIcon,
+	Chroma: ChromaIcon,
+	agents: RocketLaunchIcon,
+	chains: LinkIcon,
+	memories: CpuChipIcon,
+	llms: LightBulbIcon,
+	prompts: CommandLineIcon,
+	tools: WrenchIcon,
+	advanced: ComputerDesktopIcon,
+	chat: Bars3CenterLeftIcon,
+	embeddings: FingerPrintIcon,
+	documentloaders: PaperClipIcon,
+	vectorstores: CircleStackIcon,
+	toolkits: WrenchScrewdriverIcon,
+	textsplitters: ScissorsIcon,
+	wrappers: GiftIcon,
+	utilities: Squares2X2Icon,
+	unknown: QuestionMarkCircleIcon,
 };
 
 export const bgColors = {
-  white: "bg-white",
-  red: "bg-red-100",
-  orange: "bg-orange-100",
-  amber: "bg-amber-100",
-  yellow: "bg-yellow-100",
-  lime: "bg-lime-100",
-  green: "bg-green-100",
-  emerald: "bg-emerald-100",
-  teal: "bg-teal-100",
-  cyan: "bg-cyan-100",
-  sky: "bg-sky-100",
-  blue: "bg-blue-100",
-  indigo: "bg-indigo-100",
-  violet: "bg-violet-100",
-  purple: "bg-purple-100",
-  fuchsia: "bg-fuchsia-100",
-  pink: "bg-pink-100",
-  rose: "bg-rose-100",
-  black: "bg-black-100",
-  gray: "bg-gray-100",
+	white: "bg-white",
+	red: "bg-red-100",
+	orange: "bg-orange-100",
+	amber: "bg-amber-100",
+	yellow: "bg-yellow-100",
+	lime: "bg-lime-100",
+	green: "bg-green-100",
+	emerald: "bg-emerald-100",
+	teal: "bg-teal-100",
+	cyan: "bg-cyan-100",
+	sky: "bg-sky-100",
+	blue: "bg-blue-100",
+	indigo: "bg-indigo-100",
+	violet: "bg-violet-100",
+	purple: "bg-purple-100",
+	fuchsia: "bg-fuchsia-100",
+	pink: "bg-pink-100",
+	rose: "bg-rose-100",
+	black: "bg-black-100",
+	gray: "bg-gray-100",
 };
 
 export const bgColorsHover = {
-  white: "hover:bg-white",
-  black: "hover:bg-black-50",
-  gray: "hover:bg-gray-50",
-  red: "hover:bg-red-50",
-  orange: "hover:bg-orange-50",
-  amber: "hover:bg-amber-50",
-  yellow: "hover:bg-yellow-50",
-  lime: "hover:bg-lime-50",
-  green: "hover:bg-green-50",
-  emerald: "hover:bg-emerald-50",
-  teal: "hover:bg-teal-50",
-  cyan: "hover:bg-cyan-50",
-  sky: "hover:bg-sky-50",
-  blue: "hover:bg-blue-50",
-  indigo: "hover:bg-indigo-50",
-  violet: "hover:bg-violet-50",
-  purple: "hover:bg-purple-50",
-  fuchsia: "hover:bg-fuchsia-50",
-  pink: "hover:bg-pink-50",
-  rose: "hover:bg-rose-50",
+	white: "hover:bg-white",
+	black: "hover:bg-black-50",
+	gray: "hover:bg-gray-50",
+	red: "hover:bg-red-50",
+	orange: "hover:bg-orange-50",
+	amber: "hover:bg-amber-50",
+	yellow: "hover:bg-yellow-50",
+	lime: "hover:bg-lime-50",
+	green: "hover:bg-green-50",
+	emerald: "hover:bg-emerald-50",
+	teal: "hover:bg-teal-50",
+	cyan: "hover:bg-cyan-50",
+	sky: "hover:bg-sky-50",
+	blue: "hover:bg-blue-50",
+	indigo: "hover:bg-indigo-50",
+	violet: "hover:bg-violet-50",
+	purple: "hover:bg-purple-50",
+	fuchsia: "hover:bg-fuchsia-50",
+	pink: "hover:bg-pink-50",
+	rose: "hover:bg-rose-50",
 };
 
 export const textColorsHex = {
-  red: "rgb(185 28 28)",
-  orange: "rgb(194 65 12)",
-  amber: "rgb(180 83 9)",
-  yellow: "rgb(161 98 7)",
-  lime: "rgb(77 124 15)",
-  green: "rgb(21 128 61)",
-  emerald: "rgb(4 120 87)",
-  teal: "rgb(15 118 110)",
-  cyan: "rgb(14 116 144)",
-  sky: "rgb(3 105 161)",
-  blue: "rgb(29 78 216)",
-  indigo: "rgb(67 56 202)",
-  violet: "rgb(109 40 217)",
-  purple: "rgb(126 34 206)",
-  fuchsia: "rgb(162 28 175)",
-  pink: "rgb(190 24 93)",
-  rose: "rgb(190 18 60)",
+	red: "rgb(185 28 28)",
+	orange: "rgb(194 65 12)",
+	amber: "rgb(180 83 9)",
+	yellow: "rgb(161 98 7)",
+	lime: "rgb(77 124 15)",
+	green: "rgb(21 128 61)",
+	emerald: "rgb(4 120 87)",
+	teal: "rgb(15 118 110)",
+	cyan: "rgb(14 116 144)",
+	sky: "rgb(3 105 161)",
+	blue: "rgb(29 78 216)",
+	indigo: "rgb(67 56 202)",
+	violet: "rgb(109 40 217)",
+	purple: "rgb(126 34 206)",
+	fuchsia: "rgb(162 28 175)",
+	pink: "rgb(190 24 93)",
+	rose: "rgb(190 18 60)",
 };
 
 export const bgColorsHex = {
-  red: "rgb(254 226 226)",
-  orange: "rgb(255 237 213)",
-  amber: "rgb(254 243 199)",
-  yellow: "rgb(254 249 195)",
-  lime: "rgb(236 252 203)",
-  green: "rgb(220 252 231)",
-  emerald: "rgb(209 250 229)",
-  teal: "rgb(204 251 241)",
-  cyan: "rgb(207 250 254)",
-  sky: "rgb(224 242 254)",
-  blue: "rgb(219 234 254)",
-  indigo: "rgb(224 231 255)",
-  violet: "rgb(237 233 254)",
-  purple: "rgb(243 232 255)",
-  fuchsia: "rgb(250 232 255)",
-  pink: "rgb(252 231 243)",
-  rose: "rgb(255 228 230)",
+	red: "rgb(254 226 226)",
+	orange: "rgb(255 237 213)",
+	amber: "rgb(254 243 199)",
+	yellow: "rgb(254 249 195)",
+	lime: "rgb(236 252 203)",
+	green: "rgb(220 252 231)",
+	emerald: "rgb(209 250 229)",
+	teal: "rgb(204 251 241)",
+	cyan: "rgb(207 250 254)",
+	sky: "rgb(224 242 254)",
+	blue: "rgb(219 234 254)",
+	indigo: "rgb(224 231 255)",
+	violet: "rgb(237 233 254)",
+	purple: "rgb(243 232 255)",
+	fuchsia: "rgb(250 232 255)",
+	pink: "rgb(252 231 243)",
+	rose: "rgb(255 228 230)",
 };
 
 export const taskTypeMap: { [key: string]: string } = {
-  MULTICLASS_CLASSIFICATION: "Multiclass Classification",
+	MULTICLASS_CLASSIFICATION: "Multiclass Classification",
 };
 
 const charWidths: { [char: string]: number } = {
-  " ": 0.2,
-  "!": 0.2,
-  '"': 0.3,
-  "#": 0.5,
-  $: 0.5,
-  "%": 0.5,
-  "&": 0.5,
-  "(": 0.2,
-  ")": 0.2,
-  "*": 0.5,
-  "+": 0.5,
-  ",": 0.2,
-  "-": 0.2,
-  ".": 0.1,
-  "/": 0.5,
-  ":": 0.2,
-  ";": 0.2,
-  "<": 0.5,
-  "=": 0.5,
-  ">": 0.5,
-  "?": 0.2,
-  "@": 0.5,
-  "[": 0.2,
-  "\\": 0.5,
-  "]": 0.2,
-  "^": 0.5,
-  _: 0.2,
-  "`": 0.5,
-  "{": 0.2,
-  "|": 0.2,
-  "}": 0.2,
-  "~": 0.5,
+	" ": 0.2,
+	"!": 0.2,
+	'"': 0.3,
+	"#": 0.5,
+	$: 0.5,
+	"%": 0.5,
+	"&": 0.5,
+	"(": 0.2,
+	")": 0.2,
+	"*": 0.5,
+	"+": 0.5,
+	",": 0.2,
+	"-": 0.2,
+	".": 0.1,
+	"/": 0.5,
+	":": 0.2,
+	";": 0.2,
+	"<": 0.5,
+	"=": 0.5,
+	">": 0.5,
+	"?": 0.2,
+	"@": 0.5,
+	"[": 0.2,
+	"\\": 0.5,
+	"]": 0.2,
+	"^": 0.5,
+	_: 0.2,
+	"`": 0.5,
+	"{": 0.2,
+	"|": 0.2,
+	"}": 0.2,
+	"~": 0.5,
 };
 
 for (let i = 65; i <= 90; i++) {
-  charWidths[String.fromCharCode(i)] = 0.6;
+	charWidths[String.fromCharCode(i)] = 0.6;
 }
 for (let i = 97; i <= 122; i++) {
-  charWidths[String.fromCharCode(i)] = 0.5;
+	charWidths[String.fromCharCode(i)] = 0.5;
 }
 
 export function measureTextWidth(text: string, fontSize: number) {
-  let wordWidth = 0;
-  for (let j = 0; j < text.length; j++) {
-    let char = text[j];
-    let charWidth = charWidths[char] || 0.5;
-    wordWidth += charWidth * fontSize;
-  }
-  return wordWidth;
+	let wordWidth = 0;
+	for (let j = 0; j < text.length; j++) {
+		let char = text[j];
+		let charWidth = charWidths[char] || 0.5;
+		wordWidth += charWidth * fontSize;
+	}
+	return wordWidth;
 }
 
 export function measureTextHeight(
-  text: string,
-  width: number,
-  fontSize: number
+	text: string,
+	width: number,
+	fontSize: number
 ) {
-  const charHeight = fontSize;
-  const lineHeight = charHeight * 1.5;
-  const words = text.split(" ");
-  let lineWidth = 0;
-  let totalHeight = 0;
-  for (let i = 0; i < words.length; i++) {
-    let word = words[i];
-    let wordWidth = measureTextWidth(word, fontSize);
-    if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
-      lineWidth += wordWidth + charWidths[" "] * fontSize;
-    } else {
-      totalHeight += lineHeight;
-      lineWidth = wordWidth;
-    }
-  }
-  totalHeight += lineHeight;
-  return totalHeight;
+	const charHeight = fontSize;
+	const lineHeight = charHeight * 1.5;
+	const words = text.split(" ");
+	let lineWidth = 0;
+	let totalHeight = 0;
+	for (let i = 0; i < words.length; i++) {
+		let word = words[i];
+		let wordWidth = measureTextWidth(word, fontSize);
+		if (lineWidth + wordWidth + charWidths[" "] * fontSize <= width) {
+			lineWidth += wordWidth + charWidths[" "] * fontSize;
+		} else {
+			totalHeight += lineHeight;
+			lineWidth = wordWidth;
+		}
+	}
+	totalHeight += lineHeight;
+	return totalHeight;
 }
 
 export function toCamelCase(str: string) {
-  return str
-    .split(" ")
-    .map((word, index) =>
-      index === 0
-        ? word.toLowerCase()
-        : word[0].toUpperCase() + word.slice(1).toLowerCase()
-    )
-    .join("");
+	return str
+		.split(" ")
+		.map((word, index) =>
+			index === 0
+				? word.toLowerCase()
+				: word[0].toUpperCase() + word.slice(1).toLowerCase()
+		)
+		.join("");
 }
 export function toFirstUpperCase(str: string) {
-  return str
-    .split(" ")
-    .map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
-    .join("");
+	return str
+		.split(" ")
+		.map((word, index) => word[0].toUpperCase() + word.slice(1).toLowerCase())
+		.join("");
 }
 
 export function snakeToSpaces(str: string) {
-  let result = str.split("_").join(" ");
+	let result = str
+		.split("_")
+		.join(" ");
 
-  return result;
+	return result
 }
 
 export function toNormalCase(str: string) {
-  let result = str
-    .split("_")
-    .map((word, index) => {
-      if (index === 0) {
-        return word[0].toUpperCase() + word.slice(1).toLowerCase();
-      }
-      return word.toLowerCase();
-    })
-    .join(" ");
+	let result = str
+		.split("_")
+		.map((word, index) => {
+			if (index === 0) {
+				return word[0].toUpperCase() + word.slice(1).toLowerCase();
+			}
+			return word.toLowerCase();
+		})
+		.join(" ");
 
-  return result
-    .split("-")
-    .map((word, index) => {
-      if (index === 0) {
-        return word[0].toUpperCase() + word.slice(1).toLowerCase();
-      }
-      return word.toLowerCase();
-    })
-    .join(" ");
+	return result
+		.split("-")
+		.map((word, index) => {
+			if (index === 0) {
+				return word[0].toUpperCase() + word.slice(1).toLowerCase();
+			}
+			return word.toLowerCase();
+		})
+		.join(" ");
 }
 
 export function normalCaseToSnakeCase(str: string) {
-  return str
-    .split(" ")
-    .map((word, index) => {
-      if (index === 0) {
-        return word[0].toUpperCase() + word.slice(1).toLowerCase();
-      }
-      return word.toLowerCase();
-    })
-    .join("_");
+	return str
+		.split(" ")
+		.map((word, index) => {
+			if (index === 0) {
+				return word[0].toUpperCase() + word.slice(1).toLowerCase();
+			}
+			return word.toLowerCase();
+		})
+		.join("_");
 }
 
 export function roundNumber(x: number, decimals: number) {
-  return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
+	return Math.round(x * Math.pow(10, decimals)) / Math.pow(10, decimals);
 }
 
 export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
-  const sourceId = edge.source;
-  const targetId = edge.target;
-  const connectedNodes = nodes.filter(
-    (node) => node.id === targetId || node.id === sourceId
-  );
-  return connectedNodes;
+	const sourceId = edge.source;
+	const targetId = edge.target;
+	const connectedNodes = nodes.filter(
+		(node) => node.id === targetId || node.id === sourceId
+	);
+	return connectedNodes;
 }
 
 export function isValidConnection(
-  { source, target, sourceHandle, targetHandle }: Connection,
-  reactFlowInstance: ReactFlowInstance
+	{ source, target, sourceHandle, targetHandle }: Connection,
+	reactFlowInstance: ReactFlowInstance
 ) {
-  if (
-    sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
-    sourceHandle
-      .split("|")
-      .slice(2)
-      .some((t) => t === targetHandle.split("|")[0]) ||
-    targetHandle.split("|")[0] === "str"
-  ) {
-    let targetNode = reactFlowInstance.getNode(target).data.node;
-    if (!targetNode) {
-      if (
-        !reactFlowInstance
-          .getEdges()
-          .find((e) => e.targetHandle === targetHandle)
-      ) {
-        return true;
-      }
-    } else if (
-      (!targetNode.template[targetHandle.split("|")[1]].list &&
-        !reactFlowInstance
-          .getEdges()
-          .find((e) => e.targetHandle === targetHandle)) ||
-      targetNode.template[targetHandle.split("|")[1]].list
-    ) {
-      return true;
-    }
-  }
-  return false;
+	if (
+		sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
+		sourceHandle
+			.split("|")
+			.slice(2)
+			.some((t) => t === targetHandle.split("|")[0]) ||
+		targetHandle.split("|")[0] === "str"
+	) {
+		let targetNode = reactFlowInstance.getNode(target).data.node;
+		if (!targetNode) {
+			if (
+				!reactFlowInstance
+					.getEdges()
+					.find((e) => e.targetHandle === targetHandle)
+			) {
+				return true;
+			}
+		} else if (
+			(!targetNode.template[targetHandle.split("|")[1]].list &&
+				!reactFlowInstance
+					.getEdges()
+					.find((e) => e.targetHandle === targetHandle)) ||
+			targetNode.template[targetHandle.split("|")[1]].list
+		) {
+			return true;
+		}
+	}
+	return false;
 }
 
 export function removeApiKeys(flow: FlowType): FlowType {
-  let cleanFLow = _.cloneDeep(flow);
-  cleanFLow.data.nodes.forEach((node) => {
-    for (const key in node.data.node.template) {
-      if (key.includes("api")) {
-        node.data.node.template[key].value = "";
-      }
-    }
-  });
-  return cleanFLow;
+	let cleanFLow = _.cloneDeep(flow);
+	cleanFLow.data.nodes.forEach((node) => {
+		for (const key in node.data.node.template) {
+			if (key.includes("api")) {
+				node.data.node.template[key].value = "";
+			}
+		}
+	});
+	return cleanFLow;
 }
 
 export function updateObject<T extends Record<string, any>>(
-  reference: T,
-  objectToUpdate: T
+	reference: T,
+	objectToUpdate: T
 ): T {
-  let clonedObject = _.cloneDeep(objectToUpdate);
-  // Loop through each key in the object to update
-  for (const key in clonedObject) {
-    // If the key is not in the reference object, delete it
-    if (!(key in reference)) {
-      delete clonedObject[key];
-    }
-  }
-  // Loop through each key in the reference object
-  for (const key in reference) {
-    // If the key is not in the object to update, add it
-    if (!(key in clonedObject)) {
-      clonedObject[key] = reference[key];
-    }
-  }
-  return clonedObject;
+	let clonedObject = _.cloneDeep(objectToUpdate);
+	// Loop through each key in the object to update
+	for (const key in clonedObject) {
+		// If the key is not in the reference object, delete it
+		if (!(key in reference)) {
+			delete clonedObject[key];
+		}
+	}
+	// Loop through each key in the reference object
+	for (const key in reference) {
+		// If the key is not in the object to update, add it
+		if (!(key in clonedObject)) {
+			clonedObject[key] = reference[key];
+		}
+	}
+	return clonedObject;
 }
 
 export function debounce(func, wait) {
-  let timeout;
-  return function (...args) {
-    const context = this;
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(context, args), wait);
-  };
+	let timeout;
+	return function (...args) {
+		const context = this;
+		clearTimeout(timeout);
+		timeout = setTimeout(() => func.apply(context, args), wait);
+	};
 }
 
 export function updateTemplate(
-  reference: APITemplateType,
-  objectToUpdate: APITemplateType
+	reference: APITemplateType,
+	objectToUpdate: APITemplateType
 ): APITemplateType {
-  let clonedObject: APITemplateType = _.cloneDeep(reference);
+	let clonedObject: APITemplateType = _.cloneDeep(reference);
 
-  // Loop through each key in the reference object
-  for (const key in clonedObject) {
-    // If the key is not in the object to update, add it
-    if (objectToUpdate[key] && objectToUpdate[key].value) {
-      clonedObject[key].value = objectToUpdate[key].value;
-    }
-  }
-  return clonedObject;
+	// Loop through each key in the reference object
+	for (const key in clonedObject) {
+		// If the key is not in the object to update, add it
+		if (objectToUpdate[key] && objectToUpdate[key].value) {
+			clonedObject[key].value = objectToUpdate[key].value;
+		}
+	}
+	return clonedObject;
 }
 
 interface languageMap {
-  [key: string]: string | undefined;
+	[key: string]: string | undefined;
 }
 
 export const programmingLanguages: languageMap = {
-  javascript: ".js",
-  python: ".py",
-  java: ".java",
-  c: ".c",
-  cpp: ".cpp",
-  "c++": ".cpp",
-  "c#": ".cs",
-  ruby: ".rb",
-  php: ".php",
-  swift: ".swift",
-  "objective-c": ".m",
-  kotlin: ".kt",
-  typescript: ".ts",
-  go: ".go",
-  perl: ".pl",
-  rust: ".rs",
-  scala: ".scala",
-  haskell: ".hs",
-  lua: ".lua",
-  shell: ".sh",
-  sql: ".sql",
-  html: ".html",
-  css: ".css",
-  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+	javascript: ".js",
+	python: ".py",
+	java: ".java",
+	c: ".c",
+	cpp: ".cpp",
+	"c++": ".cpp",
+	"c#": ".cs",
+	ruby: ".rb",
+	php: ".php",
+	swift: ".swift",
+	"objective-c": ".m",
+	kotlin: ".kt",
+	typescript: ".ts",
+	go: ".go",
+	perl: ".pl",
+	rust: ".rs",
+	scala: ".scala",
+	haskell: ".hs",
+	lua: ".lua",
+	shell: ".sh",
+	sql: ".sql",
+	html: ".html",
+	css: ".css",
+	// add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
 };

From b16b9d687becfce6e2fc301d702bf63d2d8110b8 Mon Sep 17 00:00:00 2001
From: Gabriel Ferreira Rosalino <eu@gabrielf.com>
Date: Sun, 28 May 2023 02:10:31 -0300
Subject: [PATCH 04/12] feat: SlackDirectoryLoader

---
 src/backend/langflow/config.yaml                        | 1 +
 src/backend/langflow/interface/document_loaders/base.py | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/backend/langflow/config.yaml b/src/backend/langflow/config.yaml
index b1da1b622..9f069d2f4 100644
--- a/src/backend/langflow/config.yaml
+++ b/src/backend/langflow/config.yaml
@@ -42,6 +42,7 @@ documentloaders:
   - IMSDbLoader
   - GitbookLoader
   - ReadTheDocsLoader
+  - SlackDirectoryLoader
 embeddings:
   - OpenAIEmbeddings
   - HuggingFaceEmbeddings
diff --git a/src/backend/langflow/interface/document_loaders/base.py b/src/backend/langflow/interface/document_loaders/base.py
index aab017c0f..35a7c7add 100644
--- a/src/backend/langflow/interface/document_loaders/base.py
+++ b/src/backend/langflow/interface/document_loaders/base.py
@@ -89,6 +89,9 @@ class DocumentLoaderCreator(LangChainTypeCreator):
                 "UnstructuredWordDocumentLoader": build_file_path_template(
                     suffixes=[".docx", ".doc"], fileTypes=["docx", "doc"]
                 ),
+                "SlackDirectoryLoader": build_file_path_template(
+                    suffixes=[".zip"], fileTypes=["zip"]
+                ),
             }
 
             if name in file_path_templates:

From cc21fb66a7cf5d06361ab615344f698e6eff11d6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 May 2023 19:20:47 -0300
Subject: [PATCH 05/12] Import flows nodes id fixed

---
 src/frontend/src/contexts/tabsContext.tsx |  9 ++--
 src/frontend/src/pages/FlowPage/index.tsx |  1 -
 src/frontend/src/utils.ts                 | 57 ++++++++++++++---------
 3 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index a373ad9a7..f41682b38 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -8,7 +8,7 @@ import {
 } from "react";
 import { FlowType, NodeType } from "../types/flow";
 import { LangFlowState, TabsContextType } from "../types/tabs";
-import { normalCaseToSnakeCase, updateObject, updateTemplate } from "../utils";
+import { normalCaseToSnakeCase, updateIds, updateObject, updateTemplate } from "../utils";
 import { alertContext } from "./alertContext";
 import { typesContext } from "./typesContext";
 import { APITemplateType, TemplateVariableType } from "../types/api";
@@ -58,11 +58,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       Saveflows.forEach((flow) => {
         if (flow.data && flow.data?.nodes)
           flow.data?.nodes.forEach((node) => {
-            console.log(node.data.type);
             Object.keys(node.data.node.template).forEach((key) => {
-              console.log(node.data.node.template[key].type);
               if (node.data.node.template[key].type === "file") {
-                console.log(node.data.node.template[key]);
                 // ! Commenting this out for now, as it is causing issues with the file upload
                 // node.data.node.template[key].content = "";
               }
@@ -283,7 +280,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   function addFlow(flow?: FlowType) {
     // Get data from the flow or set it to null if there's no flow provided.
-    const data = flow?.data ? flow.data : null;
+
+    let data = flow?.data ? flow.data : null;
     const description = flow?.description ? flow.description : "";
 
     if (data) {
@@ -307,6 +305,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           );
         }
       });
+      updateIds(data, getNodeId);
     }
     // Create a new flow with a default name if no flow is provided.
     let newFlow: FlowType = {
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index f1a1f3b74..d8112410d 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -318,7 +318,6 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
               setDisableCopyPaste(false);
             }}
             onPaneMouseLeave={() => {
-              console.log("saiu o mouse");
               setDisableCopyPaste(true);
             }}
             onNodesChange={onNodesChange}
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 2c2732962..9b7e32a92 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -16,8 +16,8 @@ import {
   CircleStackIcon,
   Squares2X2Icon,
 } from "@heroicons/react/24/outline";
-import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
-import { FlowType } from "./types/flow";
+import { Connection, Edge, Node, ReactFlowInstance, addEdge } from "reactflow";
+import { FlowType, NodeType } from "./types/flow";
 import { APITemplateType, TemplateVariableType } from "./types/api";
 import _ from "lodash";
 import { v4 as uuidv4 } from "uuid";
@@ -536,26 +536,37 @@ export function checkUpperWords(str: string) {
   return words.join(" ");
 }
 
-export function updateIds(newFLow: FlowType, baseFlow: FlowType) {
-  newFLow.data.nodes.forEach((node) => {
-    while (baseFlow.data.nodes.some((n) => n.id === node.id)) {
-      const newId = uuidv4();
-      newFLow.data.edges.forEach((edge) => {
-        if (edge.source === node.id) {
-          edge.source = newId;
-        }
-        if (edge.target === node.id) {
-          edge.target = newId;
-        }
-        const index = edge.id.split("|").findIndex((e) => e === node.id);
-        if (index != -1) {
-          let tempList = edge.id.split("|");
-          tempList[index] = newId;
-          edge.id = tempList.concat(newId).join("|");
-        }
-        node.id = newId;
-      });
-    }
+export function updateIds(newFlow, getNodeId) {
+  let idsMap = {};
+
+  newFlow.nodes.forEach((n) => {
+    // Generate a unique node ID
+    let newId = getNodeId();
+    idsMap[n.id] = newId;
+    n.id = newId;
+    n.data.id = newId;
+    // Add the new node to the list of nodes in state
+  });
+
+  newFlow.edges.forEach((e) => {
+    e.source = idsMap[e.source];
+    e.target = idsMap[e.target];
+    let sourceHandleSplitted = e.sourceHandle.split("|");
+    e.sourceHandle =
+      sourceHandleSplitted[0] +
+      "|" +
+      e.source +
+      "|" +
+      sourceHandleSplitted.slice(2).join("|");
+    let targetHandleSplitted = e.targetHandle.split("|");
+    e.targetHandle =
+      targetHandleSplitted.slice(0, -1).join("|") + "|" + e.target;
+    e.id =
+      "reactflow__edge-" +
+      e.source +
+      e.sourceHandle +
+      "-" +
+      e.target +
+      e.targetHandle;
   });
-  return newFLow;
 }

From 19d54458130cb1557b2f21bd4d700825f5e74d74 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 May 2023 19:22:59 -0300
Subject: [PATCH 06/12] remove classname from edges on import

---
 src/frontend/src/contexts/tabsContext.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index a373ad9a7..8be0a7c69 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -85,6 +85,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     if (cookie && Object.keys(templates).length > 0) {
       let cookieObject: LangFlowState = JSON.parse(cookie);
       cookieObject.flows.forEach((flow) => {
+        flow.data.edges.forEach((edge) => {edge.className = "";})
         flow.data.nodes.forEach((node) => {
           if (Object.keys(templates[node.data.type]["template"]).length > 0) {
             node.data.node.base_classes =
@@ -285,8 +286,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     // Get data from the flow or set it to null if there's no flow provided.
     const data = flow?.data ? flow.data : null;
     const description = flow?.description ? flow.description : "";
-
     if (data) {
+      data.edges.forEach((edge) => {edge.className = "";})
       data.nodes.forEach((node) => {
         if (Object.keys(templates[node.data.type]["template"]).length > 0) {
           node.data.node.base_classes =

From 2ba5678a1c514fe411a95c99ac4d8bbdafc09270 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 May 2023 19:23:24 -0300
Subject: [PATCH 07/12] remove classname from edges on import

---
 src/frontend/src/contexts/tabsContext.tsx   |  8 +++--
 src/frontend/src/icons/ChromaIcon/index.tsx |  4 +--
 src/frontend/src/utils.ts                   | 34 ++++++++++-----------
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 8be0a7c69..a1d3eda7c 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -85,7 +85,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     if (cookie && Object.keys(templates).length > 0) {
       let cookieObject: LangFlowState = JSON.parse(cookie);
       cookieObject.flows.forEach((flow) => {
-        flow.data.edges.forEach((edge) => {edge.className = "";})
+        flow.data.edges.forEach((edge) => {
+          edge.className = "";
+        });
         flow.data.nodes.forEach((node) => {
           if (Object.keys(templates[node.data.type]["template"]).length > 0) {
             node.data.node.base_classes =
@@ -287,7 +289,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     const data = flow?.data ? flow.data : null;
     const description = flow?.description ? flow.description : "";
     if (data) {
-      data.edges.forEach((edge) => {edge.className = "";})
+      data.edges.forEach((edge) => {
+        edge.className = "";
+      });
       data.nodes.forEach((node) => {
         if (Object.keys(templates[node.data.type]["template"]).length > 0) {
           node.data.node.base_classes =
diff --git a/src/frontend/src/icons/ChromaIcon/index.tsx b/src/frontend/src/icons/ChromaIcon/index.tsx
index 045108535..2e4790edc 100644
--- a/src/frontend/src/icons/ChromaIcon/index.tsx
+++ b/src/frontend/src/icons/ChromaIcon/index.tsx
@@ -3,9 +3,7 @@ import { ReactComponent as ChromaSVG } from "./chroma.svg";
 
 const ChromaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
-    return (
-      <ChromaSVG ref={ref} {...props} />
-    );
+    return <ChromaSVG ref={ref} {...props} />;
   }
 );
 
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 0d5590ddd..12a2b5805 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -124,23 +124,23 @@ export const nodeIcons: {
     React.SVGProps<SVGSVGElement>
   >;
 } = {
-	Chroma: ChromaIcon,
-	agents: RocketLaunchIcon,
-	chains: LinkIcon,
-	memories: CpuChipIcon,
-	llms: LightBulbIcon,
-	prompts: CommandLineIcon,
-	tools: WrenchIcon,
-	advanced: ComputerDesktopIcon,
-	chat: Bars3CenterLeftIcon,
-	embeddings: FingerPrintIcon,
-	documentloaders: PaperClipIcon,
-	vectorstores: CircleStackIcon,
-	toolkits: WrenchScrewdriverIcon,
-	textsplitters: ScissorsIcon,
-	wrappers: GiftIcon,
-	utilities: Squares2X2Icon,
-	unknown: QuestionMarkCircleIcon,
+  Chroma: ChromaIcon,
+  agents: RocketLaunchIcon,
+  chains: LinkIcon,
+  memories: CpuChipIcon,
+  llms: LightBulbIcon,
+  prompts: CommandLineIcon,
+  tools: WrenchIcon,
+  advanced: ComputerDesktopIcon,
+  chat: Bars3CenterLeftIcon,
+  embeddings: FingerPrintIcon,
+  documentloaders: PaperClipIcon,
+  vectorstores: CircleStackIcon,
+  toolkits: WrenchScrewdriverIcon,
+  textsplitters: ScissorsIcon,
+  wrappers: GiftIcon,
+  utilities: Squares2X2Icon,
+  unknown: QuestionMarkCircleIcon,
 };
 
 export const bgColors = {

From f9cee9965235484d5feeaf62f0d5f3da194d466e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 May 2023 19:26:21 -0300
Subject: [PATCH 08/12] Fixed dark mode on input components

---
 src/frontend/src/components/floatComponent/index.tsx | 2 +-
 src/frontend/src/components/inputComponent/index.tsx | 2 +-
 src/frontend/src/components/intComponent/index.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index f3678b0c1..afef83b0f 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -20,7 +20,7 @@ export default function FloatComponent({
         type="number"
         value={myValue}
         className={
-          "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+          "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
           (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder="Type a number from zero to one"
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 5430795e9..69b442b3c 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -36,7 +36,7 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
+          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : ""
         )}
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 80f687924..29cb81866 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -36,7 +36,7 @@ export default function IntComponent({
         type="number"
         value={myValue}
         className={
-          "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+          "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
           (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder="Type a integer number"

From b1ad21626a5e4a844045b7ae1cb02751acbe3c03 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 May 2023 19:28:26 -0300
Subject: [PATCH 09/12] edges with the right color

---
 src/frontend/src/contexts/tabsContext.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index a76e5fad7..1b13adb7f 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -84,6 +84,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       cookieObject.flows.forEach((flow) => {
         flow.data.edges.forEach((edge) => {
           edge.className = "";
+          edge.style={stroke: "#222222" }
+
         });
         flow.data.nodes.forEach((node) => {
           if (Object.keys(templates[node.data.type]["template"]).length > 0) {
@@ -289,6 +291,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     if (data) {
       data.edges.forEach((edge) => {
         edge.className = "";
+        edge.style={stroke: "#222222" }
       });
       data.nodes.forEach((node) => {
         if (Object.keys(templates[node.data.type]["template"]).length > 0) {

From 254ed68eaaed7c7e0a7f99e07b04807a2f70b303 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 May 2023 19:28:32 -0300
Subject: [PATCH 10/12] edges with the right color

---
 src/frontend/src/contexts/tabsContext.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 1b13adb7f..480a154f8 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -8,7 +8,12 @@ import {
 } from "react";
 import { FlowType, NodeType } from "../types/flow";
 import { LangFlowState, TabsContextType } from "../types/tabs";
-import { normalCaseToSnakeCase, updateIds, updateObject, updateTemplate } from "../utils";
+import {
+  normalCaseToSnakeCase,
+  updateIds,
+  updateObject,
+  updateTemplate,
+} from "../utils";
 import { alertContext } from "./alertContext";
 import { typesContext } from "./typesContext";
 import { APITemplateType, TemplateVariableType } from "../types/api";
@@ -84,8 +89,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       cookieObject.flows.forEach((flow) => {
         flow.data.edges.forEach((edge) => {
           edge.className = "";
-          edge.style={stroke: "#222222" }
-
+          edge.style = { stroke: "#222222" };
         });
         flow.data.nodes.forEach((node) => {
           if (Object.keys(templates[node.data.type]["template"]).length > 0) {
@@ -291,7 +295,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     if (data) {
       data.edges.forEach((edge) => {
         edge.className = "";
-        edge.style={stroke: "#222222" }
+        edge.style = { stroke: "#222222" };
       });
       data.nodes.forEach((node) => {
         if (Object.keys(templates[node.data.type]["template"]).length > 0) {

From 6f984ca77fc1b6d418f4a4824f2ceca500bf6ebd Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 May 2023 19:52:49 -0300
Subject: [PATCH 11/12] Fixed node dragging image

---
 .../components/extraSidebarComponent/index.tsx      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 1a9e721f7..7d7ebfb7c 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -14,7 +14,11 @@ export default function ExtraSidebar() {
     data: { type: string; node?: APIClassType }
   ) {
     //start drag event
-    event.dataTransfer.effectAllowed = "move";
+    var crt = event.currentTarget.cloneNode(true);
+    crt.style.position = "absolute"; crt.style.top = "-500px"; crt.style.right = "-500px";
+    crt.classList.add("cursor-grabbing");
+    document.body.appendChild(crt);
+    event.dataTransfer.setDragImage(crt, 0, 0);
     event.dataTransfer.setData("json", JSON.stringify(data));
   }
 
@@ -48,8 +52,13 @@ export default function ExtraSidebar() {
                             node: data[d][t],
                           })
                         }
+                        onDragEnd={() => {
+                          document.body.removeChild(
+                            document.getElementsByClassName("cursor-grabbing")[0]
+                          );
+                        }}
                       >
-                        <div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
+                        <div className="flex w-full justify-between text-sm px-3 py-1 bg-white dark:bg-gray-800 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
                           <span className="text-black dark:text-white w-36 pr-1 truncate text-xs">
                             {t}
                           </span>

From 9f1d64b93f8facdc3805797b27a0622837e7142f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 May 2023 19:59:03 -0300
Subject: [PATCH 12/12] Dropdown and input width set to full

---
 src/frontend/src/components/dropdownComponent/index.tsx | 4 ++--
 src/frontend/src/components/floatComponent/index.tsx    | 2 +-
 src/frontend/src/components/intComponent/index.tsx      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index bb4cd621c..eebbe1554 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -23,9 +23,9 @@ export default function Dropdown({
       >
         {({ open }) => (
           <>
-            <div className="relative mt-1">
+            <div className="relative mt-1 w-full">
               <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
-                <span className="block w-max truncate">{internalValue}</span>
+                <span className="block truncate w-full">{internalValue}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronUpDownIcon
                     className="h-5 w-5 text-gray-400"
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index afef83b0f..4c4d0ad9a 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -15,7 +15,7 @@ export default function FloatComponent({
     }
   }, [disabled, onChange]);
   return (
-    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+    <div className={"w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")}>
       <input
         type="number"
         value={myValue}
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 29cb81866..f8887e895 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -16,9 +16,9 @@ export default function IntComponent({
   }, [disabled, onChange]);
   return (
     <div
-      className={
+      className={"w-full " + (
         disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
-      }
+  )}
     >
       <input
         onKeyDown={(event) => {