From 8b36a27056b934126c0a31e84578fb9d9aa29287 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 16:22:03 -0300
Subject: [PATCH 01/37] fix components names

---
 src/frontend/src/App.tsx                      |  2 +-
 .../index.tsx                                 |  0
 .../src/components/cardComponent/index.tsx    |  4 +-
 .../src/components/chatComponent/index.tsx    |  2 +-
 .../components/codeTabsComponent/index.tsx    |  6 +--
 .../index.tsx                                 |  0
 .../index.tsx                                 |  0
 .../index.tsx                                 |  0
 .../src/components/exampleComponent/index.tsx |  2 +-
 .../components/menuBar/index.tsx              |  2 +-
 .../components/inputGlobalComponent/index.tsx |  7 ++-
 .../index.tsx                                 |  0
 .../index.tsx                                 |  0
 .../index.tsx                                 |  0
 .../chat/index.tsx                            |  0
 .../components/parameterComponent/index.tsx   |  2 +-
 .../genericNode}/index.tsx                    |  2 +-
 .../components/chatView/chatMessage/index.tsx |  2 +-
 src/frontend/src/modals/IOModal/index.tsx     |  4 +-
 .../modals/{ApiModal => apiModal}/index.tsx   |  0
 .../index.tsx                                 |  2 +-
 .../index.tsx                                 |  0
 .../index.tsx                                 |  2 +-
 src/frontend/src/modals/exportModal/index.tsx |  2 +-
 .../src/modals/flowSettingsModal/index.tsx    |  2 +-
 .../src/modals/genericModal/index.tsx         |  4 +-
 .../components/NewFlowCardComponent/index.tsx |  0
 .../components/undrawCards/index.tsx          |  0
 .../{NewFlowModal => newFlowModal}/index.tsx  |  0
 .../components/modalField}/index.tsx          |  0
 .../index.tsx                                 |  0
 src/frontend/src/modals/shareModal/index.tsx  | 46 ++++++++++---------
 .../index.tsx                                 |  0
 .../index.tsx                                 |  0
 src/frontend/src/pages/AdminPage/index.tsx    |  8 ++--
 src/frontend/src/pages/ApiKeysPage/index.tsx  |  6 +--
 .../components/PageComponent/index.tsx        |  2 +-
 .../extraSidebarComponent/index.tsx           |  2 +-
 .../components/nodeToolbarComponent/index.tsx |  6 +--
 .../MainPage/components/components/index.tsx  |  2 +-
 src/frontend/src/pages/MainPage/index.tsx     |  4 +-
 src/frontend/src/pages/StorePage/index.tsx    |  6 +--
 42 files changed, 67 insertions(+), 62 deletions(-)
 rename src/frontend/src/components/{AccordionComponent => accordionComponent}/index.tsx (100%)
 rename src/frontend/src/components/{CrashErrorComponent => crashErrorComponent}/index.tsx (100%)
 rename src/frontend/src/components/{DropdownButtonComponent => dropdownButtonComponent}/index.tsx (100%)
 rename src/frontend/src/components/{EditFlowSettingsComponent => editFlowSettingsComponent}/index.tsx (100%)
 rename src/frontend/src/components/{PaginatorComponent => paginatorComponent}/index.tsx (100%)
 rename src/frontend/src/components/{SanitizedHTMLWrapper => sanitizedHTMLWrapper}/index.tsx (100%)
 rename src/frontend/src/components/{ShadTooltipComponent => shadTooltipComponent}/index.tsx (100%)
 rename src/frontend/src/components/{ViewTriggers => viewTriggers}/chat/index.tsx (100%)
 rename src/frontend/src/{CustomNodes/GenericNode => customNodes/genericNode}/components/parameterComponent/index.tsx (99%)
 rename src/frontend/src/{CustomNodes/GenericNode => customNodes/genericNode}/index.tsx (99%)
 rename src/frontend/src/modals/{ApiModal => apiModal}/index.tsx (100%)
 rename src/frontend/src/modals/{ConfirmationModal => confirmationModal}/index.tsx (97%)
 rename src/frontend/src/modals/{DeleteConfirmationModal => deleteConfirmationModal}/index.tsx (100%)
 rename src/frontend/src/modals/{EditNodeModal => editNodeModal}/index.tsx (99%)
 rename src/frontend/src/modals/{NewFlowModal => newFlowModal}/components/NewFlowCardComponent/index.tsx (100%)
 rename src/frontend/src/modals/{NewFlowModal => newFlowModal}/components/undrawCards/index.tsx (100%)
 rename src/frontend/src/modals/{NewFlowModal => newFlowModal}/index.tsx (100%)
 rename src/frontend/src/modals/{NodeModal/components/ModalField => nodeModal/components/modalField}/index.tsx (100%)
 rename src/frontend/src/modals/{SecretKeyModal => secretKeyModal}/index.tsx (100%)
 rename src/frontend/src/modals/{StoreApiKeyModal => storeApiKeyModal}/index.tsx (100%)
 rename src/frontend/src/modals/{UserManagementModal => userManagementModal}/index.tsx (100%)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 1a04e08f7..2d8fc3caa 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -6,7 +6,7 @@ import "./App.css";
 import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
-import CrashErrorComponent from "./components/CrashErrorComponent";
+import CrashErrorComponent from "./components/crashErrorComponent";
 import FetchErrorComponent from "./components/fetchErrorComponent";
 import LoadingComponent from "./components/loadingComponent";
 import {
diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/accordionComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/AccordionComponent/index.tsx
rename to src/frontend/src/components/accordionComponent/index.tsx
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 20f44cbde..3eb605fcb 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
-import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import IOModal from "../../modals/IOModal";
+import DeleteConfirmationModal from "../../modals/deleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -9,8 +9,8 @@ import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import cloneFLowWithParent from "../../utils/storeUtils";
 import { cn } from "../../utils/utils";
-import ShadTooltip from "../ShadTooltipComponent";
 import IconComponent from "../genericIconComponent";
+import ShadTooltip from "../shadTooltipComponent";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import {
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index cac3c548a..d483f95ee 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import ApiModal from "../../modals/ApiModal";
 import IOModal from "../../modals/IOModal";
+import ApiModal from "../../modals/apiModal";
 import ShareModal from "../../modals/shareModal";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index a3c581313..3d1c3af82 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -2,7 +2,6 @@ import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import AccordionComponent from "../../components/AccordionComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
@@ -36,11 +35,12 @@ import {
   hasDuplicateKeys,
 } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
-import ShadTooltip from "../ShadTooltipComponent";
+import AccordionComponent from "../accordionComponent";
 import DictComponent from "../dictComponent";
 import IconComponent from "../genericIconComponent";
-import KeypairListComponent from "../keypairListComponent";
 import InputComponent from "../inputComponent";
+import KeypairListComponent from "../keypairListComponent";
+import ShadTooltip from "../shadTooltipComponent";
 
 export default function CodeTabsComponent({
   flow,
diff --git a/src/frontend/src/components/CrashErrorComponent/index.tsx b/src/frontend/src/components/crashErrorComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/CrashErrorComponent/index.tsx
rename to src/frontend/src/components/crashErrorComponent/index.tsx
diff --git a/src/frontend/src/components/DropdownButtonComponent/index.tsx b/src/frontend/src/components/dropdownButtonComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/DropdownButtonComponent/index.tsx
rename to src/frontend/src/components/dropdownButtonComponent/index.tsx
diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/editFlowSettingsComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/EditFlowSettingsComponent/index.tsx
rename to src/frontend/src/components/editFlowSettingsComponent/index.tsx
diff --git a/src/frontend/src/components/exampleComponent/index.tsx b/src/frontend/src/components/exampleComponent/index.tsx
index 347797c47..8df1c2d05 100644
--- a/src/frontend/src/components/exampleComponent/index.tsx
+++ b/src/frontend/src/components/exampleComponent/index.tsx
@@ -3,8 +3,8 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { FlowType } from "../../types/flow";
 import { updateIds } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
-import ShadTooltip from "../ShadTooltipComponent";
 import IconComponent from "../genericIconComponent";
+import ShadTooltip from "../shadTooltipComponent";
 import { Button } from "../ui/button";
 import {
   Card,
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index d61f64620..85a586b16 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -17,8 +17,8 @@ import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { cn } from "../../../../utils/utils";
-import ShadTooltip from "../../../ShadTooltipComponent";
 import IconComponent from "../../../genericIconComponent";
+import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
 
 export const MenuBar = ({
diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index f3b5b3b29..3e6b340cb 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { deleteGlobalVariable } from "../../controllers/API";
-import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import DeleteConfirmationModal from "../../modals/deleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { InputGlobalComponentType } from "../../types/components";
@@ -49,7 +49,10 @@ export default function InputGlobalComponent({
       !data.node?.template[name].value &&
       data.node?.template[name].display_name
     ) {
-      if (unavaliableFields[data.node?.template[name].display_name!] && !disabled) {
+      if (
+        unavaliableFields[data.node?.template[name].display_name!] &&
+        !disabled
+      ) {
         setTimeout(() => {
           setDb(true);
           onChange(unavaliableFields[data.node?.template[name].display_name!]);
diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/paginatorComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/PaginatorComponent/index.tsx
rename to src/frontend/src/components/paginatorComponent/index.tsx
diff --git a/src/frontend/src/components/SanitizedHTMLWrapper/index.tsx b/src/frontend/src/components/sanitizedHTMLWrapper/index.tsx
similarity index 100%
rename from src/frontend/src/components/SanitizedHTMLWrapper/index.tsx
rename to src/frontend/src/components/sanitizedHTMLWrapper/index.tsx
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/shadTooltipComponent/index.tsx
similarity index 100%
rename from src/frontend/src/components/ShadTooltipComponent/index.tsx
rename to src/frontend/src/components/shadTooltipComponent/index.tsx
diff --git a/src/frontend/src/components/ViewTriggers/chat/index.tsx b/src/frontend/src/components/viewTriggers/chat/index.tsx
similarity index 100%
rename from src/frontend/src/components/ViewTriggers/chat/index.tsx
rename to src/frontend/src/components/viewTriggers/chat/index.tsx
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
similarity index 99%
rename from src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
rename to src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
index ad00225b8..3fe99b89e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
@@ -1,7 +1,6 @@
 import { cloneDeep } from "lodash";
 import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import DictComponent from "../../../../components/dictComponent";
 import Dropdown from "../../../../components/dropdownComponent";
@@ -13,6 +12,7 @@ import InputListComponent from "../../../../components/inputListComponent";
 import IntComponent from "../../../../components/intComponent";
 import KeypairListComponent from "../../../../components/keypairListComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
+import ShadTooltip from "../../../../components/shadTooltipComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
 import { Button } from "../../../../components/ui/button";
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx
similarity index 99%
rename from src/frontend/src/CustomNodes/GenericNode/index.tsx
rename to src/frontend/src/customNodes/genericNode/index.tsx
index 64d3b4bea..044d8cca4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/customNodes/genericNode/index.tsx
@@ -1,9 +1,9 @@
 import { cloneDeep } from "lodash";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
-import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
 import { Button } from "../../components/ui/button";
 import Checkmark from "../../components/ui/checkmark";
 import Loading from "../../components/ui/loading";
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
index 93a0db3c3..2b0f37240 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -6,9 +6,9 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import MaleTechnology from "../../../../../assets/male-technologist.png";
 import Robot from "../../../../../assets/robot.png";
-import SanitizedHTMLWrapper from "../../../../../components/SanitizedHTMLWrapper";
 import CodeTabsComponent from "../../../../../components/codeTabsComponent";
 import IconComponent from "../../../../../components/genericIconComponent";
+import SanitizedHTMLWrapper from "../../../../../components/sanitizedHTMLWrapper";
 import useAlertStore from "../../../../../stores/alertStore";
 import useFlowStore from "../../../../../stores/flowStore";
 import { chatMessagePropsType } from "../../../../../types/components";
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 46b934198..f734977d8 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import AccordionComponent from "../../components/AccordionComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
+import AccordionComponent from "../../components/accordionComponent";
 import IconComponent from "../../components/genericIconComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import {
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx
similarity index 100%
rename from src/frontend/src/modals/ApiModal/index.tsx
rename to src/frontend/src/modals/apiModal/index.tsx
diff --git a/src/frontend/src/modals/ConfirmationModal/index.tsx b/src/frontend/src/modals/confirmationModal/index.tsx
similarity index 97%
rename from src/frontend/src/modals/ConfirmationModal/index.tsx
rename to src/frontend/src/modals/confirmationModal/index.tsx
index 2c6377a12..9f8efa165 100644
--- a/src/frontend/src/modals/ConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/confirmationModal/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import ShadTooltip from "../../components/ShadTooltipComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
 import { Button } from "../../components/ui/button";
 import {
   ConfirmationModalType,
diff --git a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx b/src/frontend/src/modals/deleteConfirmationModal/index.tsx
similarity index 100%
rename from src/frontend/src/modals/DeleteConfirmationModal/index.tsx
rename to src/frontend/src/modals/deleteConfirmationModal/index.tsx
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
similarity index 99%
rename from src/frontend/src/modals/EditNodeModal/index.tsx
rename to src/frontend/src/modals/editNodeModal/index.tsx
index 87c72d1df..a97afae09 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -1,6 +1,5 @@
 import { cloneDeep } from "lodash";
 import { forwardRef, useEffect, useState } from "react";
-import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import DictComponent from "../../components/dictComponent";
 import Dropdown from "../../components/dropdownComponent";
@@ -12,6 +11,7 @@ import InputListComponent from "../../components/inputListComponent";
 import IntComponent from "../../components/intComponent";
 import KeypairListComponent from "../../components/keypairListComponent";
 import PromptAreaComponent from "../../components/promptComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
 import { Badge } from "../../components/ui/badge";
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 9fac4d0a8..9eca267e8 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, forwardRef, useEffect, useState } from "react";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index fb880967d..1daeb0fe1 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index e00462218..02000df4d 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
-import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
-import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
+import SanitizedHTMLWrapper from "../../components/sanitizedHTMLWrapper";
+import ShadTooltip from "../../components/shadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
diff --git a/src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx b/src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx
similarity index 100%
rename from src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx
rename to src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx
diff --git a/src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
similarity index 100%
rename from src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx
rename to src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
diff --git a/src/frontend/src/modals/NewFlowModal/index.tsx b/src/frontend/src/modals/newFlowModal/index.tsx
similarity index 100%
rename from src/frontend/src/modals/NewFlowModal/index.tsx
rename to src/frontend/src/modals/newFlowModal/index.tsx
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/nodeModal/components/modalField/index.tsx
similarity index 100%
rename from src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
rename to src/frontend/src/modals/nodeModal/components/modalField/index.tsx
diff --git a/src/frontend/src/modals/SecretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx
similarity index 100%
rename from src/frontend/src/modals/SecretKeyModal/index.tsx
rename to src/frontend/src/modals/secretKeyModal/index.tsx
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index c0a2a702b..75c3c1382 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -1,6 +1,6 @@
 import { Loader2 } from "lucide-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
 import { Button } from "../../components/ui/button";
@@ -23,8 +23,8 @@ import {
   removeGlobalVariableFromComponents,
 } from "../../utils/reactflowUtils";
 import { getTagsIds } from "../../utils/storeUtils";
-import ConfirmationModal from "../ConfirmationModal";
 import BaseModal from "../baseModal";
+import ConfirmationModal from "../confirmationModal";
 import ExportModal from "../exportModal";
 
 export default function ShareModal({
@@ -207,8 +207,9 @@ export default function ShareModal({
           {children ? children : <></>}
         </BaseModal.Trigger>
         <BaseModal.Header
-          description={`Publish ${is_component ? "your component" : "workflow"
-            } to the Langflow Store.`}
+          description={`Publish ${
+            is_component ? "your component" : "workflow"
+          } to the Langflow Store.`}
         >
           <span className="pr-2">Share</span>
           <IconComponent
@@ -251,34 +252,35 @@ export default function ShareModal({
 
         <BaseModal.Footer>
           <div className="flex w-full justify-between gap-2">
-            {!is_component && <ExportModal>
+            {!is_component && (
+              <ExportModal>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="gap-2"
+                  onClick={() => {
+                    // (setOpen || internalSetOpen)(false);
+                  }}
+                >
+                  <IconComponent name="Download" className="h-4 w-4" />
+                  Export
+                </Button>
+              </ExportModal>
+            )}
+            {is_component && (
               <Button
                 type="button"
                 variant="outline"
                 className="gap-2"
                 onClick={() => {
-                  // (setOpen || internalSetOpen)(false);
+                  (setOpen || internalSetOpen)(false);
+                  handleExportComponent();
                 }}
               >
                 <IconComponent name="Download" className="h-4 w-4" />
                 Export
               </Button>
-            </ExportModal>
-            }
-            {is_component && <Button
-              type="button"
-              variant="outline"
-              className="gap-2"
-              onClick={() => {
-                (setOpen || internalSetOpen)(false);
-                handleExportComponent();
-              }}
-            >
-              <IconComponent name="Download" className="h-4 w-4" />
-              Export
-            </Button>
-
-            }
+            )}
             <Button
               disabled={loadingNames}
               type="button"
diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/storeApiKeyModal/index.tsx
similarity index 100%
rename from src/frontend/src/modals/StoreApiKeyModal/index.tsx
rename to src/frontend/src/modals/storeApiKeyModal/index.tsx
diff --git a/src/frontend/src/modals/UserManagementModal/index.tsx b/src/frontend/src/modals/userManagementModal/index.tsx
similarity index 100%
rename from src/frontend/src/modals/UserManagementModal/index.tsx
rename to src/frontend/src/modals/userManagementModal/index.tsx
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index 95b52b24c..1d86d652d 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -1,10 +1,10 @@
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useRef, useState } from "react";
-import PaginatorComponent from "../../components/PaginatorComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
 import LoadingComponent from "../../components/loadingComponent";
+import PaginatorComponent from "../../components/paginatorComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
 import { Button } from "../../components/ui/button";
 import { CheckBoxDiv } from "../../components/ui/checkbox";
 import { Input } from "../../components/ui/input";
@@ -35,8 +35,8 @@ import {
   getUsersPage,
   updateUser,
 } from "../../controllers/API";
-import ConfirmationModal from "../../modals/ConfirmationModal";
-import UserManagementModal from "../../modals/UserManagementModal";
+import ConfirmationModal from "../../modals/confirmationModal";
+import UserManagementModal from "../../modals/userManagementModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { Users } from "../../types/api";
diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx
index 9dd473637..49f38715e 100644
--- a/src/frontend/src/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/ApiKeysPage/index.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect, useRef, useState } from "react";
-import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
+import ShadTooltip from "../../components/shadTooltipComponent";
 import { Button } from "../../components/ui/button";
 import {
   Table,
@@ -12,8 +12,8 @@ import {
 } from "../../components/ui/table";
 import { AuthContext } from "../../contexts/authContext";
 import { deleteApiKey, getApiKey } from "../../controllers/API";
-import ConfirmationModal from "../../modals/ConfirmationModal";
-import SecretKeyModal from "../../modals/SecretKeyModal";
+import ConfirmationModal from "../../modals/confirmationModal";
+import SecretKeyModal from "../../modals/secretKeyModal";
 
 import moment from "moment";
 import Header from "../../components/headerComponent";
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index e0b7af4f7..cb1a6e553 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -11,13 +11,13 @@ import ReactFlow, {
   SelectionDragHandler,
   updateEdge,
 } from "reactflow";
-import GenericNode from "../../../../CustomNodes/GenericNode";
 import {
   INVALID_SELECTION_ERROR_ALERT,
   UPLOAD_ALERT_LIST,
   UPLOAD_ERROR_ALERT,
   WRONG_FILE_ERROR_ALERT,
 } from "../../../../constants/alerts_constants";
+import GenericNode from "../../../../customNodes/genericNode";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 934d438b2..fbd0c12d1 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,8 +1,8 @@
 import { cloneDeep } from "lodash";
 import { LinkIcon, SparklesIcon } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
+import ShadTooltip from "../../../../components/shadTooltipComponent";
 import { Input } from "../../../../components/ui/input";
 import { Separator } from "../../../../components/ui/separator";
 import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 76713819a..062c49d0f 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,9 +1,9 @@
 import _, { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 import { useUpdateNodeInternals } from "reactflow";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import IconComponent from "../../../../components/genericIconComponent";
+import ShadTooltip from "../../../../components/shadTooltipComponent";
 import {
   Select,
   SelectContent,
@@ -11,8 +11,8 @@ import {
   SelectTrigger,
 } from "../../../../components/ui/select-custom";
 import { postCustomComponent } from "../../../../controllers/API";
-import ConfirmationModal from "../../../../modals/ConfirmationModal";
-import EditNodeModal from "../../../../modals/EditNodeModal";
+import ConfirmationModal from "../../../../modals/confirmationModal";
+import EditNodeModal from "../../../../modals/editNodeModal";
 import ShareModal from "../../../../modals/shareModal";
 import useAlertStore from "../../../../stores/alertStore";
 import { useDarkStore } from "../../../../stores/darkStore";
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 63cabae25..7b26b669d 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import PaginatorComponent from "../../../../components/PaginatorComponent";
 import CollectionCardComponent from "../../../../components/cardComponent";
 import CardsWrapComponent from "../../../../components/cardsWrapComponent";
 import IconComponent from "../../../../components/genericIconComponent";
+import PaginatorComponent from "../../../../components/paginatorComponent";
 import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
 import { Button } from "../../../../components/ui/button";
 import {
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index e7aa678e7..08de20b31 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -1,7 +1,7 @@
 import { Group, ToyBrick } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import DropdownButton from "../../components/DropdownButtonComponent";
+import DropdownButton from "../../components/dropdownButtonComponent";
 import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
 import SidebarNav from "../../components/sidebarComponent";
@@ -11,7 +11,7 @@ import {
   MY_COLLECTION_DESC,
   USER_PROJECTS_HEADER,
 } from "../../constants/constants";
-import NewFlowModal from "../../modals/NewFlowModal";
+import NewFlowModal from "../../modals/newFlowModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlows } from "../../utils/reactflowUtils";
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index c6be1445d..37f9efb15 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -1,15 +1,15 @@
 import { uniqueId } from "lodash";
 import { useContext, useEffect, useState } from "react";
-import PaginatorComponent from "../../components/PaginatorComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
 import CollectionCardComponent from "../../components/cardComponent";
 import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
+import ShadTooltip from "../../components/shadTooltipComponent";
 import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 
 import { Link, useNavigate, useParams } from "react-router-dom";
+import PaginatorComponent from "../../components/paginatorComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
 import { Badge } from "../../components/ui/badge";
 import {
@@ -29,7 +29,7 @@ import {
 import { STORE_DESC, STORE_TITLE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { getStoreComponents, getStoreTags } from "../../controllers/API";
-import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
+import StoreApiKeyModal from "../../modals/storeApiKeyModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";

From 081c17651e18ee0f1dd9664542c7d9fc4656c295 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 16:30:19 -0300
Subject: [PATCH 02/37] normalize names

---
 .../pages/{signUpPage => SignUpPage}/index.tsx |  0
 src/frontend/src/routes.tsx                    | 18 ++++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)
 rename src/frontend/src/pages/{signUpPage => SignUpPage}/index.tsx (100%)

diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/SignUpPage/index.tsx
similarity index 100%
rename from src/frontend/src/pages/signUpPage/index.tsx
rename to src/frontend/src/pages/SignUpPage/index.tsx
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index cc47e1f28..26b6aee48 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -10,16 +10,16 @@ import ApiKeysPage from "./pages/ApiKeysPage";
 import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
 import ComponentsComponent from "./pages/MainPage/components/components";
+import PlaygroundPage from "./pages/Playground";
 import SettingsPage from "./pages/SettingsPage";
 import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
 import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";
 import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage";
+import SignUp from "./pages/SignUpPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
-import SignUp from "./pages/signUpPage";
-import PlaygroundPage from "./pages/Playground";
 
 const Router = () => {
   return (
@@ -76,10 +76,16 @@ const Router = () => {
         }
       />
       <Route path="/playground/:id/">
-        element={
-          <Route path="" element={<ProtectedRoute>
-            <PlaygroundPage />
-          </ProtectedRoute>} />
+        element=
+        {
+          <Route
+            path=""
+            element={
+              <ProtectedRoute>
+                <PlaygroundPage />
+              </ProtectedRoute>
+            }
+          />
         }
       </Route>
       <Route path="/flow/:id/">

From 67322a40c8694affa24a24644db1535d0248734a Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 16:32:07 -0300
Subject: [PATCH 03/37] pattern on page

---
 .../pages/{deleteAccountPage => DeleteAccountPage}/index.tsx  | 0
 src/frontend/src/pages/{loginPage => LoginPage}/index.tsx     | 0
 src/frontend/src/routes.tsx                                   | 4 ++--
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/frontend/src/pages/{deleteAccountPage => DeleteAccountPage}/index.tsx (100%)
 rename src/frontend/src/pages/{loginPage => LoginPage}/index.tsx (100%)

diff --git a/src/frontend/src/pages/deleteAccountPage/index.tsx b/src/frontend/src/pages/DeleteAccountPage/index.tsx
similarity index 100%
rename from src/frontend/src/pages/deleteAccountPage/index.tsx
rename to src/frontend/src/pages/DeleteAccountPage/index.tsx
diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/LoginPage/index.tsx
similarity index 100%
rename from src/frontend/src/pages/loginPage/index.tsx
rename to src/frontend/src/pages/LoginPage/index.tsx
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 26b6aee48..434b657be 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -7,7 +7,9 @@ import { StoreGuard } from "./components/storeGuard";
 import AdminPage from "./pages/AdminPage";
 import LoginAdminPage from "./pages/AdminPage/LoginPage";
 import ApiKeysPage from "./pages/ApiKeysPage";
+import DeleteAccountPage from "./pages/DeleteAccountPage";
 import FlowPage from "./pages/FlowPage";
+import LoginPage from "./pages/LoginPage";
 import HomePage from "./pages/MainPage";
 import ComponentsComponent from "./pages/MainPage/components/components";
 import PlaygroundPage from "./pages/Playground";
@@ -18,8 +20,6 @@ import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage";
 import SignUp from "./pages/SignUpPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
-import DeleteAccountPage from "./pages/deleteAccountPage";
-import LoginPage from "./pages/loginPage";
 
 const Router = () => {
   return (

From a3484ed239cc8596a770f0dee706d2f68096fce6 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 17:01:39 -0300
Subject: [PATCH 04/37] Refactor store_message function and add Simple Git
 Hooks (#1817)

---
 src/frontend/package-lock.json | 11 +++++++++++
 src/frontend/package.json      |  6 +++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index e7020b2d6..cc84d55ee 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -98,6 +98,7 @@
         "prettier-plugin-organize-imports": "^3.2.3",
         "prettier-plugin-tailwindcss": "^0.3.0",
         "pretty-quick": "^3.1.3",
+        "simple-git-hooks": "^2.11.1",
         "tailwindcss": "^3.3.3",
         "tailwindcss-dotted-background": "^1.1.0",
         "typescript": "^5.2.2",
@@ -11894,6 +11895,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/simple-git-hooks": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/simple-git-hooks/-/simple-git-hooks-2.11.1.tgz",
+      "integrity": "sha512-tgqwPUMDcNDhuf1Xf6KTUsyeqGdgKMhzaH4PAZZuzguOgTl5uuyeYe/8mWgAr6IBxB5V06uqEf6Dy37gIWDtDg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "simple-git-hooks": "cli.js"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 3a6a2a8a9..3ac1c92b3 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -77,6 +77,9 @@
     "format": "npx prettier --write \"./**/*.{js,jsx,ts,tsx,json,md}\"",
     "type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
   },
+  "simple-git-hooks": {
+    "pre-commit": "npx pretty-quick --staged"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -120,10 +123,11 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "pretty-quick": "^3.1.3",
+    "simple-git-hooks": "^2.11.1",
     "tailwindcss": "^3.3.3",
     "tailwindcss-dotted-background": "^1.1.0",
     "typescript": "^5.2.2",
     "ua-parser-js": "^1.0.37",
     "vite": "^4.5.2"
   }
-}
+}
\ No newline at end of file

From 2eb2f3bec60ec9a1463bd19880e618a65d3513e1 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 17:02:06 -0300
Subject: [PATCH 05/37] Add pre-commit hooks for eslint and ruff (#1817)

---
 .pre-commit-config.yaml | 24 +++++++++++
 poetry.lock             | 90 ++++++++++++++++++++++++++++++++++++++++-
 pyproject.toml          |  1 +
 3 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 .pre-commit-config.yaml

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
new file mode 100644
index 000000000..a1dd36fbd
--- /dev/null
+++ b/.pre-commit-config.yaml
@@ -0,0 +1,24 @@
+repos:
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: "96c6321"
+    hooks:
+      - id: eslint
+        files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
+        types: [file]
+        additional_dependencies:
+          - eslint-plugin-prettier
+          - eslint-config-prettier
+          - prettier
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    # Ruff version.
+    rev: v0.4.2
+    hooks:
+      # Run the linter.
+      - id: ruff
+        # Python
+        files: \.py$
+        types: [file]
+      # Run the formatter.
+      - id: ruff-format
+        files: \.py$
+        types: [file]
diff --git a/poetry.lock b/poetry.lock
index e5e53fe39..b07e47063 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -828,6 +828,17 @@ files = [
 [package.dependencies]
 pycparser = "*"
 
+[[package]]
+name = "cfgv"
+version = "3.4.0"
+description = "Validate configuration and produce human readable error messages."
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "cfgv-3.4.0-py2.py3-none-any.whl", hash = "sha256:b7265b1f29fd3316bfcd2b330d63d024f2bfd8bcb8b0272f8e19a504856c48f9"},
+    {file = "cfgv-3.4.0.tar.gz", hash = "sha256:e52591d4c5f5dead8e0f673fb16db7949d2cfb3f7da4582893288f0ded8fe560"},
+]
+
 [[package]]
 name = "chardet"
 version = "5.2.0"
@@ -1604,6 +1615,17 @@ files = [
     {file = "diskcache-5.6.3.tar.gz", hash = "sha256:2c3a3fa2743d8535d832ec61c2054a1641f41775aa7c556758a109941e33e4fc"},
 ]
 
+[[package]]
+name = "distlib"
+version = "0.3.8"
+description = "Distribution utilities"
+optional = false
+python-versions = "*"
+files = [
+    {file = "distlib-0.3.8-py2.py3-none-any.whl", hash = "sha256:034db59a0b96f8ca18035f36290806a9a6e6bd9d1ff91e45a7f172eb17e51784"},
+    {file = "distlib-0.3.8.tar.gz", hash = "sha256:1530ea13e350031b6312d8580ddb6b27a104275a31106523b8f123787f494f64"},
+]
+
 [[package]]
 name = "distro"
 version = "1.9.0"
@@ -3143,6 +3165,20 @@ files = [
     {file = "hyperframe-6.0.1.tar.gz", hash = "sha256:ae510046231dc8e9ecb1a6586f63d2347bf4c8905914aa84ba585ae85f28a914"},
 ]
 
+[[package]]
+name = "identify"
+version = "2.5.36"
+description = "File identification library for Python"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "identify-2.5.36-py2.py3-none-any.whl", hash = "sha256:37d93f380f4de590500d9dba7db359d0d3da95ffe7f9de1753faa159e71e7dfa"},
+    {file = "identify-2.5.36.tar.gz", hash = "sha256:e5e00f54165f9047fbebeb4a560f9acfb8af4c88232be60a488e9b68d122745d"},
+]
+
+[package.extras]
+license = ["ukkonen"]
+
 [[package]]
 name = "idna"
 version = "3.7"
@@ -5229,6 +5265,20 @@ plot = ["matplotlib"]
 tgrep = ["pyparsing"]
 twitter = ["twython"]
 
+[[package]]
+name = "nodeenv"
+version = "1.8.0"
+description = "Node.js virtual environment builder"
+optional = false
+python-versions = ">=2.7,!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,!=3.5.*,!=3.6.*"
+files = [
+    {file = "nodeenv-1.8.0-py2.py3-none-any.whl", hash = "sha256:df865724bb3c3adc86b3876fa209771517b0cfe596beff01a92700e0e8be4cec"},
+    {file = "nodeenv-1.8.0.tar.gz", hash = "sha256:d51e0c37e64fbf47d017feac3145cdbb58836d7eee8c6f6d3b6880c5456227d2"},
+]
+
+[package.dependencies]
+setuptools = "*"
+
 [[package]]
 name = "numexpr"
 version = "2.10.0"
@@ -6215,6 +6265,24 @@ dev = ["black", "flake8", "flake8-print", "isort", "pre-commit"]
 sentry = ["django", "sentry-sdk"]
 test = ["coverage", "flake8", "freezegun (==0.3.15)", "mock (>=2.0.0)", "pylint", "pytest", "pytest-timeout"]
 
+[[package]]
+name = "pre-commit"
+version = "3.7.0"
+description = "A framework for managing and maintaining multi-language pre-commit hooks."
+optional = false
+python-versions = ">=3.9"
+files = [
+    {file = "pre_commit-3.7.0-py2.py3-none-any.whl", hash = "sha256:5eae9e10c2b5ac51577c3452ec0a490455c45a0533f7960f993a0d01e59decab"},
+    {file = "pre_commit-3.7.0.tar.gz", hash = "sha256:e209d61b8acdcf742404408531f0c37d49d2c734fd7cff2d6076083d191cb060"},
+]
+
+[package.dependencies]
+cfgv = ">=2.0.0"
+identify = ">=1.0.0"
+nodeenv = ">=0.11.1"
+pyyaml = ">=5.1"
+virtualenv = ">=20.10.0"
+
 [[package]]
 name = "prometheus-client"
 version = "0.20.0"
@@ -9561,6 +9629,26 @@ files = [
     {file = "vine-5.1.0.tar.gz", hash = "sha256:8b62e981d35c41049211cf62a0a1242d8c1ee9bd15bb196ce38aefd6799e61e0"},
 ]
 
+[[package]]
+name = "virtualenv"
+version = "20.26.1"
+description = "Virtual Python Environment builder"
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "virtualenv-20.26.1-py3-none-any.whl", hash = "sha256:7aa9982a728ae5892558bff6a2839c00b9ed145523ece2274fad6f414690ae75"},
+    {file = "virtualenv-20.26.1.tar.gz", hash = "sha256:604bfdceaeece392802e6ae48e69cec49168b9c5f4a44e483963f9242eb0e78b"},
+]
+
+[package.dependencies]
+distlib = ">=0.3.7,<1"
+filelock = ">=3.12.2,<4"
+platformdirs = ">=3.9.1,<5"
+
+[package.extras]
+docs = ["furo (>=2023.7.26)", "proselint (>=0.13)", "sphinx (>=7.1.2,!=7.3)", "sphinx-argparse (>=0.4)", "sphinxcontrib-towncrier (>=0.2.1a0)", "towncrier (>=23.6)"]
+test = ["covdefaults (>=2.3)", "coverage (>=7.2.7)", "coverage-enable-subprocess (>=1)", "flaky (>=3.7)", "packaging (>=23.1)", "pytest (>=7.4)", "pytest-env (>=0.8.2)", "pytest-freezer (>=0.4.8)", "pytest-mock (>=3.11.1)", "pytest-randomly (>=3.12)", "pytest-timeout (>=2.1)", "setuptools (>=68)", "time-machine (>=2.10)"]
+
 [[package]]
 name = "watchfiles"
 version = "0.21.0"
@@ -10253,4 +10341,4 @@ local = ["ctransformers", "llama-cpp-python", "sentence-transformers"]
 [metadata]
 lock-version = "2.0"
 python-versions = ">=3.10,<3.12"
-content-hash = "bec34397b534f882551511558c76785c7cd67e6a1eefc1d45f6a64d97175d886"
+content-hash = "b3d424bc8e83a9f10a8e71f95e2499b3018711d8edf7a594814b9388e5393a84"
diff --git a/pyproject.toml b/pyproject.toml
index f49df7a35..611a8d350 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -108,6 +108,7 @@ respx = "^0.21.1"
 pytest-instafail = "^0.5.0"
 pytest-asyncio = "^0.23.0"
 pytest-profiling = "^1.7.0"
+pre-commit = "^3.7.0"
 
 [tool.poetry.extras]
 deploy = ["celery", "redis", "flower"]

From 89595d4a1428344789e331ad11d63893e1f7fae3 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 17:07:23 -0300
Subject: [PATCH 06/37] Update pre-commit-config.yaml and Makefile

---
 .pre-commit-config.yaml | 2 +-
 Makefile                | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index a1dd36fbd..9bfb498e3 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -1,6 +1,6 @@
 repos:
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: "96c6321"
+    rev: "v9.1.1"
     hooks:
       - id: eslint
         files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
diff --git a/Makefile b/Makefile
index 6d279e62f..193ab70dc 100644
--- a/Makefile
+++ b/Makefile
@@ -123,6 +123,7 @@ setup_devcontainer:
 setup_env:
 	@sh ./scripts/setup/update_poetry.sh 1.8.2
 	@sh ./scripts/setup/setup_env.sh
+	@poetry run pre-commit autoupdate && poetry run pre-commit install
 
 frontend:
 	make install_frontend

From 5c2caf23c8e12b9ab22aadc1b94143faa8c50608 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 17:07:52 -0300
Subject: [PATCH 07/37] Refactor pre-commit installation in Makefile

---
 Makefile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index 193ab70dc..8e1b72361 100644
--- a/Makefile
+++ b/Makefile
@@ -123,7 +123,7 @@ setup_devcontainer:
 setup_env:
 	@sh ./scripts/setup/update_poetry.sh 1.8.2
 	@sh ./scripts/setup/setup_env.sh
-	@poetry run pre-commit autoupdate && poetry run pre-commit install
+	@poetry run pre-commit install
 
 frontend:
 	make install_frontend

From cf403220dc55c928edb8a0724558f63bd9e77a3e Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 17:07:58 -0300
Subject: [PATCH 08/37] Refactor update_poetry.sh script to install pipx and
 poetry dependencies

---
 scripts/setup/update_poetry.sh | 88 ++--------------------------------
 1 file changed, 3 insertions(+), 85 deletions(-)

diff --git a/scripts/setup/update_poetry.sh b/scripts/setup/update_poetry.sh
index 94c51fd56..a8825a116 100644
--- a/scripts/setup/update_poetry.sh
+++ b/scripts/setup/update_poetry.sh
@@ -32,90 +32,6 @@ case "$OS" in
         ;;
 esac
 
-echo "Detected Operating System: $OS"
-
-# Installation of pipx based on the detected OS
-install_pipx() {
-    case $1 in
-        macOS)
-            # macOS installation using Homebrew
-            command -v brew >/dev/null 2>&1 || exit_with_message "Homebrew is not installed. Please install Homebrew first."
-            echo "Installing pipx using Homebrew..."
-            brew install pipx
-            pipx ensurepath
-            ;;
-        Linux)
-            # Linux installation. Further checks are needed to distinguish between distributions
-            if grep -qEi "(ubuntu|debian)" /etc/*release; then
-                echo "Installing pipx on Ubuntu/Debian..."
-                sudo apt update
-                sudo apt install pipx -y
-            elif grep -qEi "fedora" /etc/*release; then
-                echo "Installing pipx on Fedora..."
-                sudo dnf install pipx -y
-            else
-                echo "Installing pipx using pip (other Linux distributions)..."
-                python3 -m pip install --user pipx
-            fi
-            pipx ensurepath
-            ;;
-        *)
-            exit_with_message "Unsupported operating system for pipx installation."
-            ;;
-    esac
-}
-
-# Function to fetch the latest version of pipx from GitHub and compare with the installed version
-check_for_pipx_update() {
-    echo "Checking for updates to pipx..."
-    # Fetch the latest version of pipx, ensuring only to capture the numeric version without 'v' prefix.
-    local latest_version=$(curl -s https://api.github.com/repos/pypa/pipx/releases/latest | grep '"tag_name":' | sed -E 's/.*"tag_name": "v?([^"]+)".*/\1/')
-    # Extract the current installed version of pipx.
-    local current_version=$(pipx --version | grep -oE '[0-9]+\.[0-9]+\.[0-9]+')
-
-    if [[ "$latest_version" == "$current_version" ]]; then
-        echo "You have the latest version of pipx ($current_version)."
-    else
-        echo "A newer version of pipx ($latest_version) is available. You have $current_version. Do you want to update? (yes/no)"
-        read -r user_input
-        if [[ "$user_input" == "yes" ]]; then
-            echo "Updating pipx..."
-            case "$OS" in
-                macOS)
-                    brew upgrade pipx
-                    ;;
-                Linux)
-                    if grep -qEi "(ubuntu|debian)" /etc/*release; then
-                        sudo apt update
-                        sudo apt install --only-upgrade pipx -y
-                    elif grep -qEi "fedora" /etc/*release; then
-                        sudo dnf upgrade pipx -y
-                    else
-                        python3 -m pip install --user --upgrade pipx
-                    fi
-                    ;;
-                *)
-                    exit_with_message "Unsupported operating system for pipx update."
-                    ;;
-            esac
-            pipx ensurepath
-            echo "pipx updated to version $latest_version"
-        else
-            echo "Not updating pipx at this time."
-        fi
-    fi
-}
-
-# Now, modify the existing check to call check_for_pipx_update even if pipx is installed
-if ! command -v pipx &> /dev/null; then
-    echo "Pipx is not installed. Installing..."
-    install_pipx "$OS"
-    echo "Pipx installed successfully."
-else
-    echo "Pipx is already installed."
-    check_for_pipx_update
-fi
-
 
 echo "Checking Poetry installation..."
 
@@ -124,7 +40,7 @@ if ! command -v poetry &> /dev/null
 then
     echo "Poetry is not installed. Installing..."
     # Also install python 3.10 and use
-    pipx install poetry --python python3.10  --fetch-missing-python
+    curl -sSL https://install.python-poetry.org | python3 -
     echo "Poetry installed successfully."
 else
     echo "Poetry is already installed."
@@ -146,3 +62,5 @@ else
     echo "Poetry version is $1 or higher. No need to update."
 fi
 
+
+

From c9248d253a0366dd8afdb6598bc1d9f1633bba48 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 18:08:39 -0300
Subject: [PATCH 09/37] =?UTF-8?q?=F0=9F=93=9D=20(addNewVariableButton.tsx)?=
 =?UTF-8?q?:=20reformat=20code=20for=20better=20readability=20and=20mainta?=
 =?UTF-8?q?inability=20=F0=9F=93=9D=20(addNewVariableButton.tsx):=20fix=20?=
 =?UTF-8?q?typo=20in=20variable=20name=20'unavaliableFields'=20to=20'unava?=
 =?UTF-8?q?ilableFields'=20=F0=9F=93=9D=20(addNewVariableButton.tsx):=20ad?=
 =?UTF-8?q?d=20id=20attribute=20to=20InputComponent=20for=20better=20acces?=
 =?UTF-8?q?sibility=20=F0=9F=93=9D=20(headerComponent/index.tsx):=20add=20?=
 =?UTF-8?q?data-testid=20attribute=20to=20user-profile-settings=20button?=
 =?UTF-8?q?=20for=20easier=20testing=20=F0=9F=93=9D=20(inputComponent/inde?=
 =?UTF-8?q?x.tsx):=20add=20data-testid=20attribute=20to=20popover=20anchor?=
 =?UTF-8?q?=20element=20for=20easier=20testing=20=E2=9C=A8=20(userSettings?=
 =?UTF-8?q?.spec.ts):=20add=20end-to-end=20tests=20for=20user=20settings?=
 =?UTF-8?q?=20page,=20including=20testing=20profile=20gradient,=20interact?=
 =?UTF-8?q?ing=20with=20global=20variables,=20and=20checking=20shortcuts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addNewVariableButton.tsx                  |  8 +-
 .../src/components/headerComponent/index.tsx  |  1 +
 .../src/components/inputComponent/index.tsx   |  1 +
 .../tests/end-to-end/userSettings.spec.ts     | 91 +++++++++++++++++++
 4 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/tests/end-to-end/userSettings.spec.ts

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index e5e8dd488..f33037ebc 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -22,9 +22,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
-  const unavaliableFields =new Set(Object.keys(useGlobalVariablesStore(
-    (state) => state.unavaliableFields
-  )));
+  const unavaliableFields = new Set(
+    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
+  );
 
   const availableFields = Array.from(componentFields).filter(
     (field) => !unavaliableFields.has(field)
@@ -97,6 +97,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             password={false}
             options={["Generic", "Credential"]}
             placeholder="Choose a type for the variable..."
+            id={"type-global-variables"}
           ></InputComponent>
           <Label>Value</Label>
           <Textarea
@@ -114,6 +115,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             password={false}
             options={availableFields}
             placeholder="Choose a field for the variable..."
+            id={"apply-to-fields"}
           ></InputComponent>
         </div>
       </BaseModal.Content>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index af219f2ac..bc2537ea2 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -174,6 +174,7 @@ export default function Header(): JSX.Element {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button
+                  data-testid="user-profile-settings"
                   className={
                     "h-7 w-7 rounded-full focus-visible:outline-0 " +
                     (userData?.profile_image ??
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index e355293ff..7b178a4d7 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -247,6 +247,7 @@ export default function InputComponent({
             </PopoverContentWithoutPortal>
           </Popover>
           <div
+            data-testid={"popover-anchor-" + id}
             className={cn(
               "pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
               ((selectedOption !== "" || !onChange) && setSelectedOption) ||
diff --git a/src/frontend/tests/end-to-end/userSettings.spec.ts b/src/frontend/tests/end-to-end/userSettings.spec.ts
new file mode 100644
index 000000000..6f90bb19c
--- /dev/null
+++ b/src/frontend/tests/end-to-end/userSettings.spec.ts
@@ -0,0 +1,91 @@
+import { test } from "@playwright/test";
+
+test("should see general profile gradient", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("General").nth(2).isVisible();
+  await page.getByText("Profile Gradient").isVisible();
+});
+
+test("should interact with global variables", async ({ page }) => {
+  const randomName = Math.random().toString(36).substring(2);
+
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("Global Variables").click();
+  await page.getByText("Global Variables").nth(2);
+  await page.getByText("Global Variables", { exact: true }).nth(1).isVisible();
+  await page.getByText("Add New").click();
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(randomName);
+  await page.getByTestId("popover-anchor-type-global-variables").click();
+  await page.getByPlaceholder("Search options...").fill("Generic");
+  await page.waitForTimeout(2000);
+  await page.getByText("Generic", { exact: true }).last().isVisible();
+  await page.getByText("Generic", { exact: true }).last().click();
+
+  await page.getByTestId("popover-anchor-type-global-variables").click();
+  await page.waitForTimeout(2000);
+  await page.getByPlaceholder("Search options...").fill("Generic");
+  await page.getByText("Generic", { exact: true }).last().isVisible();
+  await page.getByText("Generic", { exact: true }).last().click();
+
+  await page
+    .getByPlaceholder("Insert a value for the variable...")
+    .fill("testtesttesttesttesttesttesttest");
+  await page.getByTestId("popover-anchor-apply-to-fields").click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search options...").fill("System Message");
+
+  await page.getByText("System Message").first().click();
+
+  await page.getByPlaceholder("Search options...").fill("openAI");
+
+  await page.getByText("OpenAI API Base").first().click();
+
+  await page.getByPlaceholder("Search options...").fill("llama");
+
+  await page.getByText("Ollama").first().click();
+
+  await page.keyboard.press("Escape");
+  await page.getByText("Save Variable", { exact: true }).click();
+
+  await page.getByText(randomName).isVisible();
+
+  await page
+    .getByLabel("Press Space to toggle all rows selection (unchecked)")
+    .nth(0)
+    .click();
+  await page.getByTestId("icon-Trash2").click();
+  await page.getByText("No Rows To Show").isVisible();
+});
+
+test("should see shortcuts", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByTestId("user-profile-settings").click();
+  await page.getByText("Settings").click();
+  await page.getByText("General").nth(2).isVisible();
+  await page.getByText("Shortcuts").nth(0).click();
+  await page.getByText("Shortcuts", { exact: true }).nth(1).isVisible();
+  await page
+    .getByText("Advanced Settings Component", { exact: true })
+    .isVisible();
+  await page.getByText("Minimize Component", { exact: true }).isVisible();
+  await page.getByText("Code Component", { exact: true }).isVisible();
+  await page.getByText("Copy Component", { exact: true }).isVisible();
+  await page.getByText("Duplicate Component", { exact: true }).isVisible();
+  await page.getByText("Share Component", { exact: true }).isVisible();
+  await page.getByText("Docs Component", { exact: true }).isVisible();
+  await page.getByText("Save Component", { exact: true }).isVisible();
+  await page.getByText("Delete Component", { exact: true }).isVisible();
+  await page.getByText("Open Playground", { exact: true }).isVisible();
+  await page.getByText("Undo", { exact: true }).isVisible();
+  await page.getByText("Redo", { exact: true }).isVisible();
+});

From d057dc16000a586f72d7db3d14c84664f3a40e41 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 18:28:24 -0300
Subject: [PATCH 10/37] =?UTF-8?q?=F0=9F=94=A7=20(FileInput.py,=20JsonInput?=
 =?UTF-8?q?.py,=20KeyPairInput.py,=20StringListInput.py,=20CSVOutput.py,?=
 =?UTF-8?q?=20ImageOutput.py,=20JsonOutput.py,=20KeyPairOutput.py,=20PDFOu?=
 =?UTF-8?q?tput.py,=20StringListOutput.py):=20delete=20unused=20input=20an?=
 =?UTF-8?q?d=20output=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The input and output components FileInput.py, JsonInput.py, KeyPairInput.py, StringListInput.py, CSVOutput.py, ImageOutput.py, JsonOutput.py, KeyPairOutput.py, PDFOutput.py, and StringListOutput.py were deleted as they were no longer being used in the project. This cleanup improves code organization and reduces unnecessary dependencies.
---
 .../langflow/components/inputs/FileInput.py   | 48 -------------------
 .../langflow/components/inputs/JsonInput.py   | 17 -------
 .../components/inputs/KeyPairInput.py         | 19 --------
 .../components/inputs/StringListInput.py      | 13 -----
 .../langflow/components/outputs/CSVOutput.py  | 17 -------
 .../components/outputs/ImageOutput.py         | 15 ------
 .../langflow/components/outputs/JsonOutput.py | 17 -------
 .../components/outputs/KeyPairOutput.py       | 19 --------
 .../langflow/components/outputs/PDFOutput.py  | 16 -------
 .../components/outputs/StringListOutput.py    | 13 -----
 10 files changed, 194 deletions(-)
 delete mode 100644 src/backend/base/langflow/components/inputs/FileInput.py
 delete mode 100644 src/backend/base/langflow/components/inputs/JsonInput.py
 delete mode 100644 src/backend/base/langflow/components/inputs/KeyPairInput.py
 delete mode 100644 src/backend/base/langflow/components/inputs/StringListInput.py
 delete mode 100644 src/backend/base/langflow/components/outputs/CSVOutput.py
 delete mode 100644 src/backend/base/langflow/components/outputs/ImageOutput.py
 delete mode 100644 src/backend/base/langflow/components/outputs/JsonOutput.py
 delete mode 100644 src/backend/base/langflow/components/outputs/KeyPairOutput.py
 delete mode 100644 src/backend/base/langflow/components/outputs/PDFOutput.py
 delete mode 100644 src/backend/base/langflow/components/outputs/StringListOutput.py

diff --git a/src/backend/base/langflow/components/inputs/FileInput.py b/src/backend/base/langflow/components/inputs/FileInput.py
deleted file mode 100644
index 0cd7c12b1..000000000
--- a/src/backend/base/langflow/components/inputs/FileInput.py
+++ /dev/null
@@ -1,48 +0,0 @@
-from pathlib import Path
-from typing import Any, Dict
-
-from langflow.base.data.utils import TEXT_FILE_TYPES, parse_text_file_to_record
-from langflow.interface.custom.custom_component import CustomComponent
-from langflow.schema import Record
-
-
-class FileInput(CustomComponent):
-    display_name = "File Input"
-    description = "A generic file input."
-    icon = "file-text"
-
-    def build_config(self) -> Dict[str, Any]:
-        return {
-            "path": {
-                "display_name": "Path",
-                "field_type": "file",
-                "file_types": TEXT_FILE_TYPES,
-                "info": f"Supported file types: {', '.join(TEXT_FILE_TYPES)}",
-            },
-            "silent_errors": {
-                "display_name": "Silent Errors",
-                "advanced": True,
-                "info": "If true, errors will not raise an exception.",
-            },
-        }
-
-    def load_file(self, path: str, silent_errors: bool = False) -> Record:
-        resolved_path = self.resolve_path(path)
-        path_obj = Path(resolved_path)
-        extension = path_obj.suffix[1:].lower()
-        if extension == "doc":
-            raise ValueError("doc files are not supported. Please save as .docx")
-        if extension not in TEXT_FILE_TYPES:
-            raise ValueError(f"Unsupported file type: {extension}")
-        record = parse_text_file_to_record(resolved_path, silent_errors)
-        self.status = record if record else "No data"
-        return record or Record()
-
-    def build(
-        self,
-        path: str,
-        silent_errors: bool = False,
-    ) -> Record:
-        record = self.load_file(path, silent_errors)
-        self.status = record
-        return record
diff --git a/src/backend/base/langflow/components/inputs/JsonInput.py b/src/backend/base/langflow/components/inputs/JsonInput.py
deleted file mode 100644
index 713868147..000000000
--- a/src/backend/base/langflow/components/inputs/JsonInput.py
+++ /dev/null
@@ -1,17 +0,0 @@
-from langflow.base.io.text import TextComponent
-from langflow.field_typing.constants import Data, NestedDict
-
-class JsonInput(TextComponent):
-    display_name = "JSON Input"  
-    description = "JSON Input."
-
-    def build_config(self):
-        return {
-            "input_value": {
-                "display_name": "JSON",
-                "field_type": "NestedDict"
-            }
-        }
-
-    def build(self, input_value: NestedDict) -> NestedDict:
-        return input_value
diff --git a/src/backend/base/langflow/components/inputs/KeyPairInput.py b/src/backend/base/langflow/components/inputs/KeyPairInput.py
deleted file mode 100644
index c48d0a0e1..000000000
--- a/src/backend/base/langflow/components/inputs/KeyPairInput.py
+++ /dev/null
@@ -1,19 +0,0 @@
-from langflow.base.io.text import TextComponent
-from langflow.field_typing.constants import Data
-
-
-class KeyPairInput(TextComponent):
-    display_name = "Dictionary Input"  
-    description = "Dictionary Input."
-
-    def build_config(self):
-        return {
-            "input_value": {
-                "display_name": "Dictionaries",
-                "field_type": "dict",
-                "list": True
-            }
-        }
-
-    def build(self, input_value: dict) -> dict:
-        return input_value
diff --git a/src/backend/base/langflow/components/inputs/StringListInput.py b/src/backend/base/langflow/components/inputs/StringListInput.py
deleted file mode 100644
index 5eadce9bc..000000000
--- a/src/backend/base/langflow/components/inputs/StringListInput.py
+++ /dev/null
@@ -1,13 +0,0 @@
-# from langflow.field_typing import Data
-from langflow.schema import Record
-from langflow.interface.custom.custom_component import CustomComponent
-
-
-class StringListInput(CustomComponent):
-    display_name = "String List Input"
-
-    def build_config(self):
-        return {"input_value": {"display_name": "String List Input", "field_type": "str", "list": True}}
-
-    def build(self, input_value: list) -> Record:
-        return Record(data=input_value)
diff --git a/src/backend/base/langflow/components/outputs/CSVOutput.py b/src/backend/base/langflow/components/outputs/CSVOutput.py
deleted file mode 100644
index 711a6ab96..000000000
--- a/src/backend/base/langflow/components/outputs/CSVOutput.py
+++ /dev/null
@@ -1,17 +0,0 @@
-from typing import Optional
-
-from langflow.base.io.text import TextComponent
-from langflow.field_typing import Text, Data
-
-
-class CSVOutput(TextComponent):
-    display_name = "CSV Output"
-    description = "Used view csv files"
-
-    field_config = {
-        "input_value": {"display_name": "csv","info":"A csv blob","input_types":["Data"]},
-        "separator": {"display_name": "separator","info":"The separator used in the csv file","input_types":["Text"], "field_type":"Text","default_value":";","options":[";", ",", "|"]},
-    }
-
-    def build(self, input_value: Data, separator) -> Data:
-        return {"data": input_value, "separator": separator}
diff --git a/src/backend/base/langflow/components/outputs/ImageOutput.py b/src/backend/base/langflow/components/outputs/ImageOutput.py
deleted file mode 100644
index f50fb7bf7..000000000
--- a/src/backend/base/langflow/components/outputs/ImageOutput.py
+++ /dev/null
@@ -1,15 +0,0 @@
-from typing import Optional
-
-from langflow.base.io.text import TextComponent
-from langflow.field_typing import Text
-
-class ImageOutput(TextComponent):
-    display_name = "Image Output"
-    description = "Used view image files"
-
-    field_config = {
-        "input_value": {"display_name": "image","info":"A image url","input_types":["Text"]},
-    }
-
-    def build(self, input_value: Text) -> Text:
-        return input_value
\ No newline at end of file
diff --git a/src/backend/base/langflow/components/outputs/JsonOutput.py b/src/backend/base/langflow/components/outputs/JsonOutput.py
deleted file mode 100644
index cbbc10ddc..000000000
--- a/src/backend/base/langflow/components/outputs/JsonOutput.py
+++ /dev/null
@@ -1,17 +0,0 @@
-from langflow.base.io.text import TextComponent
-from langflow.field_typing.constants import Data, NestedDict
-
-class JsonOutput(TextComponent):
-    display_name = "JSON Output"  
-    description = "JSON Output."
-
-    def build_config(self):
-        return {
-            "input_value": {
-                "display_name": "JSON",
-                "field_type": "NestedDict"
-            }
-        }
-
-    def build(self, input_value: NestedDict) -> NestedDict:
-        return input_value
diff --git a/src/backend/base/langflow/components/outputs/KeyPairOutput.py b/src/backend/base/langflow/components/outputs/KeyPairOutput.py
deleted file mode 100644
index f2204bb83..000000000
--- a/src/backend/base/langflow/components/outputs/KeyPairOutput.py
+++ /dev/null
@@ -1,19 +0,0 @@
-from langflow.base.io.text import TextComponent
-from langflow.field_typing.constants import Data
-
-
-class KeyPairOutput(TextComponent):
-    display_name = "Dictionary Output"  
-    description = "Dictionary Output."
-
-    def build_config(self):
-        return {
-            "input_value": {
-                "display_name": "Dictionaries",
-                "field_type": "dict",
-                "list": True
-            }
-        }
-
-    def build(self, input_value: dict) -> dict:
-        return input_value
diff --git a/src/backend/base/langflow/components/outputs/PDFOutput.py b/src/backend/base/langflow/components/outputs/PDFOutput.py
deleted file mode 100644
index 75e1fabf4..000000000
--- a/src/backend/base/langflow/components/outputs/PDFOutput.py
+++ /dev/null
@@ -1,16 +0,0 @@
-from typing import Optional
-
-from langflow.base.io.text import TextComponent
-from langflow.field_typing import Text
-
-
-class PDFOutput(TextComponent):
-    display_name = "PDF Output"
-    description = "Used view pdf files"
-
-    field_config = {
-        "input_value": {"display_name": "pdf","info":"A pdf url","input_types":["Text"]},
-    }
-
-    def build(self, input_value: Text) -> Text:
-        return input_value
diff --git a/src/backend/base/langflow/components/outputs/StringListOutput.py b/src/backend/base/langflow/components/outputs/StringListOutput.py
deleted file mode 100644
index 3b1ff6088..000000000
--- a/src/backend/base/langflow/components/outputs/StringListOutput.py
+++ /dev/null
@@ -1,13 +0,0 @@
-# from langflow.field_typing import Data
-from langflow.schema import Record
-from langflow.interface.custom.custom_component import CustomComponent
-
-
-class StringListOutput(CustomComponent):
-    display_name = "String List Output"
-
-    def build_config(self):
-        return {"input_value": {"display_name": "String List Output", "field_type": "str", "list": True}}
-
-    def build(self, input_value: list) -> Record:
-        return Record(data=input_value)
\ No newline at end of file

From 354a236bc782dbb303fd4fa51376c79c60dbfc4d Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Date: Thu, 2 May 2024 18:32:13 -0300
Subject: [PATCH 11/37] Fix custom_repr assignment in
 instantiate_custom_component function (#1828)

---
 src/backend/base/langflow/interface/initialize/loading.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/base/langflow/interface/initialize/loading.py b/src/backend/base/langflow/interface/initialize/loading.py
index 15045cd06..fcec59cae 100644
--- a/src/backend/base/langflow/interface/initialize/loading.py
+++ b/src/backend/base/langflow/interface/initialize/loading.py
@@ -185,7 +185,7 @@ async def instantiate_custom_component(params, user_id, vertex):
         # Call the build method directly if it's sync
         build_result = custom_component.build(**params_copy)
     custom_repr = custom_component.custom_repr()
-    if not custom_repr and isinstance(build_result, (dict, Record, str)):
+    if custom_repr is None and isinstance(build_result, (dict, Record, str)):
         custom_repr = build_result
     if not isinstance(custom_repr, str):
         custom_repr = str(custom_repr)

From ff1516a27a29c4a53371c80b292ea0edef9ae0b7 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 18:35:58 -0300
Subject: [PATCH 12/37] test lint

---
 src/frontend/src/pages/MainPage/components/components/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 7b26b669d..4f184377e 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -86,7 +86,6 @@ export default function ComponentsComponent({
       }
     }
   };
-
   function resetFilter() {
     setPageIndex(1);
     setPageSize(20);

From 42f9381c7d6ae316e859833b4a47656605ff14e7 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 18:37:02 -0300
Subject: [PATCH 13/37] Refactor pre-commit installation in Makefile and update
 dependencies

---
 Makefile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index 8e1b72361..7053ef8cb 100644
--- a/Makefile
+++ b/Makefile
@@ -123,7 +123,6 @@ setup_devcontainer:
 setup_env:
 	@sh ./scripts/setup/update_poetry.sh 1.8.2
 	@sh ./scripts/setup/setup_env.sh
-	@poetry run pre-commit install
 
 frontend:
 	make install_frontend
@@ -136,6 +135,7 @@ frontendc:
 install_backend:
 	@echo 'Installing backend dependencies'
 	@poetry install
+	@poetry run pre-commit install
 
 backend:
 	@echo 'Setting up the environment'

From 120f9b2a97336083f317860e98322dfc6623c929 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 2 May 2024 18:42:21 -0300
Subject: [PATCH 14/37] fix playground button position

---
 src/frontend/src/components/cardComponent/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 3eb605fcb..f080fe3b2 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -327,7 +327,7 @@ export default function CollectionCardComponent({
                   Playground
                 </Button>
               ) : (
-                <div></div>
+                undefined
               )}
               {data.liked_by_count != undefined && (
                 <div className="flex gap-0.5">

From 8eef545acc24eff726895a8dfdb7cf5940ed17ed Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 18:42:46 -0300
Subject: [PATCH 15/37] Update ESLint configuration to include React and
 Prettier plugins

---
 src/frontend/.eslintrc.json | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/frontend/.eslintrc.json b/src/frontend/.eslintrc.json
index 682c7fc87..50a471e83 100644
--- a/src/frontend/.eslintrc.json
+++ b/src/frontend/.eslintrc.json
@@ -1,8 +1,22 @@
 {
-  "extends": ["eslint:recommended", "plugin:node/recommended"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "standard"
+  ],
+  "plugins": ["react"],
   "parserOptions": {
     "ecmaVersion": 2018
   },
+  "env": {
+    "browser": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
     "no-console": "warn",
     "no-self-assign": "warn",
@@ -16,6 +30,7 @@
     "no-redeclare": "error",
     "no-empty": "error",
     "no-await-in-loop": "error",
+    "react/react-in-jsx-scope": 0,
     "node/exports-style": ["error", "module.exports"],
     "node/file-extension-in-import": ["error", "always"],
     "node/prefer-global/buffer": ["error", "always"],

From c9a9ca2958bebeaabad5b5b2a0ceb0fa068e6f26 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 18:51:22 -0300
Subject: [PATCH 16/37] Update .pre-commit-config.yaml to enable fail_fast
 option and add eslint repository

---
 .pre-commit-config.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 9bfb498e3..5a52ab481 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -1,3 +1,4 @@
+fail_fast: true
 repos:
   - repo: https://github.com/pre-commit/mirrors-eslint
     rev: "v9.1.1"

From 33ad0430d32c4604b51812a3ec79ed2a0855873d Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 18:51:27 -0300
Subject: [PATCH 17/37] =?UTF-8?q?=F0=9F=94=A7=20(.pre-commit-config.yaml):?=
 =?UTF-8?q?=20add=20eslint-plugin-react@latest=20as=20a=20dependency=20to?=
 =?UTF-8?q?=20improve=20linting=20for=20React=20components=20=F0=9F=94=A7?=
 =?UTF-8?q?=20(.eslintrc.json):=20update=20eslint=20configuration=20to=20i?=
 =?UTF-8?q?nclude=20additional=20plugins,=20parser,=20parserOptions,=20and?=
 =?UTF-8?q?=20env=20settings=20to=20improve=20linting=20for=20React=20comp?=
 =?UTF-8?q?onents=20and=20TypeScript=20files=20=E2=99=BB=EF=B8=8F=20(index?=
 =?UTF-8?q?.tsx):=20remove=20unnecessary=20empty=20line=20to=20improve=20c?=
 =?UTF-8?q?ode=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .pre-commit-config.yaml                             |  1 +
 src/frontend/.eslintrc.json                         | 13 ++++++++-----
 .../pages/MainPage/components/components/index.tsx  |  1 -
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 9bfb498e3..87e379282 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -9,6 +9,7 @@ repos:
           - eslint-plugin-prettier
           - eslint-config-prettier
           - prettier
+          - eslint-plugin-react@latest
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
     rev: v0.4.2
diff --git a/src/frontend/.eslintrc.json b/src/frontend/.eslintrc.json
index 50a471e83..1b09f8c18 100644
--- a/src/frontend/.eslintrc.json
+++ b/src/frontend/.eslintrc.json
@@ -2,15 +2,18 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:prettier/recommended",
-    "standard"
+    "plugin:prettier/recommended"
   ],
-  "plugins": ["react"],
+  "plugins": ["react", "import-helpers", "prettier"],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 2018
+    "project": ["./tsconfig.node.json", "./tsconfig.json"],
+    "extraFileExtensions:": [".mdx"],
+    "extensions:": [".mdx"]
   },
   "env": {
-    "browser": true
+    "browser": true,
+    "es2021": true
   },
   "settings": {
     "react": {
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 4f184377e..566872457 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -90,7 +90,6 @@ export default function ComponentsComponent({
     setPageIndex(1);
     setPageSize(20);
   }
-
   return (
     <CardsWrapComponent
       onFileDrop={onFileDrop}

From 9cd39252330d24ea9779b9059c7ca983ddf1fc09 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 18:54:01 -0300
Subject: [PATCH 18/37] remove parser

---
 .pre-commit-config.yaml                                         | 1 +
 src/frontend/src/pages/MainPage/components/components/index.tsx | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 5de3060ef..5668a32e4 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -11,6 +11,7 @@ repos:
           - eslint-config-prettier
           - prettier
           - eslint-plugin-react@latest
+          - typescript-eslint
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
     rev: v0.4.2
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 566872457..0a390b5f1 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -30,7 +30,6 @@ export default function ComponentsComponent({
   const [pageIndex, setPageIndex] = useState(1);
 
   const navigate = useNavigate();
-
   const all: FlowType[] = flows
     .filter((f) => (f.is_component ?? false) === is_component)
     .sort((a, b) => {

From da927d56c1edba2e2e83672bcf8d960968bf1101 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 2 May 2024 19:02:28 -0300
Subject: [PATCH 19/37] fix history propagation on playground

---
 src/frontend/src/components/cardComponent/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index f080fe3b2..e6e90483f 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -82,8 +82,8 @@ export default function CollectionCardComponent({
       } else {
         setNodes([], true);
         setEdges([], true);
-        cleanFlowPool();
       }
+      cleanFlowPool();
     }
   }, [openPlayground]);
 

From 2920e6959385ea788f9c40b9a72cb724bf295ee1 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 19:27:40 -0300
Subject: [PATCH 20/37] =?UTF-8?q?=F0=9F=94=A7=20(.pre-commit-config.yaml):?=
 =?UTF-8?q?=20Add=20eslint@9.1.1=20as=20a=20dependency=20and=20enable=20au?=
 =?UTF-8?q?tofix=20for=20pretty-format-json=20hook=20=F0=9F=94=A7=20(.esli?=
 =?UTF-8?q?ntrc.json):=20Update=20eslint=20configuration=20to=20include=20?=
 =?UTF-8?q?additional=20plugins,=20parser,=20parserOptions,=20and=20env=20?=
 =?UTF-8?q?settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json          | 90 +++++++++++++++++++++++++++++++++++++++++
 .pre-commit-config.yaml | 19 ++++++++-
 eslint.config.js        |  0
 3 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 .eslintrc.json
 create mode 100644 eslint.config.js

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..fc12c18c2
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,90 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "plugins": [
+        "react",
+        "import-helpers",
+        "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": [
+            "./tsconfig.node.json",
+            "./tsconfig.json"
+        ],
+        "extraFileExtensions:": [
+            ".mdx"
+        ],
+        "extensions:": [
+            ".mdx"
+        ]
+    },
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "rules": {
+        "no-console": "warn",
+        "no-self-assign": "warn",
+        "no-self-compare": "warn",
+        "complexity": [
+            "error",
+            {
+                "max": 15
+            }
+        ],
+        "indent": [
+            "error",
+            2,
+            {
+                "SwitchCase": 1
+            }
+        ],
+        "no-dupe-keys": "error",
+        "no-invalid-regexp": "error",
+        "no-undef": "error",
+        "no-return-assign": "error",
+        "no-redeclare": "error",
+        "no-empty": "error",
+        "no-await-in-loop": "error",
+        "react/react-in-jsx-scope": 0,
+        "node/exports-style": [
+            "error",
+            "module.exports"
+        ],
+        "node/file-extension-in-import": [
+            "error",
+            "always"
+        ],
+        "node/prefer-global/buffer": [
+            "error",
+            "always"
+        ],
+        "node/prefer-global/console": [
+            "error",
+            "always"
+        ],
+        "node/prefer-global/process": [
+            "error",
+            "always"
+        ],
+        "node/prefer-global/url-search-params": [
+            "error",
+            "always"
+        ],
+        "node/prefer-global/url": [
+            "error",
+            "always"
+        ],
+        "node/prefer-promises/dns": "error",
+        "node/prefer-promises/fs": "error"
+    }
+}
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 5668a32e4..60505515a 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -6,12 +6,29 @@ repos:
       - id: eslint
         files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
         types: [file]
+        args: ["--fix", "--no-warn-ignored"]
         additional_dependencies:
+          - eslint@9.1.1
           - eslint-plugin-prettier
           - eslint-config-prettier
           - prettier
           - eslint-plugin-react@latest
-          - typescript-eslint
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.1.0
+    hooks:
+      - id: check-case-conflict
+      - id: end-of-file-fixer
+      - id: mixed-line-ending
+        args:
+          - --fix=lf
+      - id: trailing-whitespace
+      - id: pretty-format-json
+        exclude: ^tsconfig.*.json
+        args:
+          - --autofix
+          - --indent=4
+          - --no-sort-keys
+      - id: check-merge-conflict
   - repo: https://github.com/astral-sh/ruff-pre-commit
     # Ruff version.
     rev: v0.4.2
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 000000000..e69de29bb

From 83a05589ca5eaf528ec25d10ae58b9d0e03dd62c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 2 May 2024 19:46:42 -0300
Subject: [PATCH 21/37] Fix word-break issue in chatMessage component

---
 .../src/modals/IOModal/components/chatView/chatMessage/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
index 2b0f37240..7f3bbc95e 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -324,6 +324,7 @@ dark:prose-invert"
               </>
             ) : (
               <span
+              className="prose text-primary word-break-break-word dark:prose-invert"
                 data-testid={
                   "chat-message-" + chat.sender_name + "-" + chatMessage
                 }

From b7cfa211b3e6bb0d0cf82118e23ffbfce5f9caed Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 2 May 2024 19:48:14 -0300
Subject: [PATCH 22/37] Fix chatMessage component layout issue

---
 .../modals/IOModal/components/chatView/chatMessage/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
index 7f3bbc95e..ee56f3a8f 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -271,7 +271,7 @@ dark:prose-invert"
             </div>
           </div>
         ) : (
-          <div>
+          <div className="form-modal-chat-text-position min-w-96 flex-grow">
             {template ? (
               <>
                 <button

From 13ff4e1d26183b7817adcfb21d6c4910a2080550 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 2 May 2024 21:45:03 -0300
Subject: [PATCH 23/37] Add openDelete state and button to
 CollectionCardComponent

---
 .../src/components/cardComponent/index.tsx    | 42 ++++++++++++-------
 .../modals/deleteConfirmationModal/index.tsx  |  6 ++-
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index e6e90483f..8b3510f45 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -61,6 +61,7 @@ export default function CollectionCardComponent({
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
   const [openPlayground, setOpenPlayground] = useState(false);
+  const [openDelete, setOpenDelete] = useState(false);
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
@@ -105,18 +106,16 @@ export default function CollectionCardComponent({
         addFlow(true, newFlow)
           .then((id) => {
             setSuccessData({
-              title: `${name} ${
-                isStore ? "Downloaded" : "Installed"
-              } Successfully.`,
+              title: `${name} ${isStore ? "Downloaded" : "Installed"
+                } Successfully.`,
             });
             setLoading(false);
           })
           .catch((error) => {
             setLoading(false);
             setErrorData({
-              title: `Error ${
-                isStore ? "downloading" : "installing"
-              } the ${name}`,
+              title: `Error ${isStore ? "downloading" : "installing"
+                } the ${name}`,
               list: [error["response"]["data"]["detail"]],
             });
           });
@@ -236,16 +235,17 @@ export default function CollectionCardComponent({
                 )}
 
                 {onDelete && data?.metadata === undefined && (
-                  <DeleteConfirmationModal
-                    onConfirm={() => {
-                      onDelete();
+                    <button onClick={(e) => {
+                      e.stopPropagation();
+                      setOpenDelete(true);
                     }}
-                  >
-                    <IconComponent
-                      name="Trash2"
-                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
-                    />
-                  </DeleteConfirmationModal>
+                    >
+
+                      <IconComponent
+                        name="Trash2"
+                        className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                      />
+                    </button>
                 )}
               </CardTitle>
             </div>
@@ -485,6 +485,18 @@ export default function CollectionCardComponent({
           <></>
         </IOModal>
       )}
+      {openDelete && (
+        <DeleteConfirmationModal
+          open={openDelete}
+          setOpen={setOpenDelete}
+          onConfirm={() => {
+            if(onDelete) onDelete();
+          }}
+        >
+          <></>
+        </DeleteConfirmationModal>
+      )
+      }
     </>
   );
 }
diff --git a/src/frontend/src/modals/deleteConfirmationModal/index.tsx b/src/frontend/src/modals/deleteConfirmationModal/index.tsx
index 3621e27cf..e412e741a 100644
--- a/src/frontend/src/modals/deleteConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/deleteConfirmationModal/index.tsx
@@ -15,14 +15,18 @@ export default function DeleteConfirmationModal({
   onConfirm,
   description,
   asChild,
+  open,
+  setOpen,
 }: {
   children: JSX.Element;
   onConfirm: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   description?: string;
   asChild?: boolean;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
 }) {
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild={asChild} tabIndex={-1}>
         {children}
       </DialogTrigger>

From 8121151a8f08745bc99027d6fc9f4f618d9d66ca Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 3 May 2024 09:54:02 -0300
Subject: [PATCH 24/37] =?UTF-8?q?=E2=9C=A8=20(IOModal/index.tsx):=20change?=
 =?UTF-8?q?=20size=20prop=20value=20from=20"large"=20to=20"md-thin"=20to?=
 =?UTF-8?q?=20adjust=20the=20size=20of=20the=20modal=20based=20on=20the=20?=
 =?UTF-8?q?selected=20tab=20=E2=9C=A8=20(baseModal/index.tsx):=20add=20new?=
 =?UTF-8?q?=20size=20option=20"md-thin"=20to=20adjust=20the=20size=20of=20?=
 =?UTF-8?q?the=20modal=20to=20be=20medium=20and=20thin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/IOModal/index.tsx   | 32 ++++++++++-----------
 src/frontend/src/modals/baseModal/index.tsx | 17 +++++++----
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index f734977d8..49283ece0 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -34,25 +34,25 @@ export default function IOModal({
 }: IOModalPropsType): JSX.Element {
   const allNodes = useFlowStore((state) => state.nodes);
   const inputs = useFlowStore((state) => state.inputs).filter(
-    (input) => input.type !== "ChatInput"
+    (input) => input.type !== "ChatInput",
   );
   const chatInput = useFlowStore((state) => state.inputs).find(
-    (input) => input.type === "ChatInput"
+    (input) => input.type === "ChatInput",
   );
   const outputs = useFlowStore((state) => state.outputs).filter(
-    (output) => output.type !== "ChatOutput"
+    (output) => output.type !== "ChatOutput",
   );
   const chatOutput = useFlowStore((state) => state.outputs).find(
-    (output) => output.type === "ChatOutput"
+    (output) => output.type === "ChatOutput",
   );
   const nodes = useFlowStore((state) => state.nodes).filter(
     (node) =>
       inputs.some((input) => input.id === node.id) ||
-      outputs.some((output) => output.id === node.id)
+      outputs.some((output) => output.id === node.id),
   );
   const haveChat = chatInput || chatOutput;
   const [selectedTab, setSelectedTab] = useState(
-    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
+    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
   );
 
   function startView() {
@@ -117,7 +117,7 @@ export default function IOModal({
 
   return (
     <BaseModal
-      size={selectedTab === 0 ? "large-thin" : "large"}
+      size={selectedTab === 0 ? "large-thin" : "md-thin"}
       open={open}
       setOpen={setOpen}
       disable={disable}
@@ -140,7 +140,7 @@ export default function IOModal({
             {selectedTab !== 0 && (
               <div
                 className={cn(
-                  "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
+                  "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
                 )}
               >
                 <Tabs
@@ -173,11 +173,11 @@ export default function IOModal({
                     </div>
                     {nodes
                       .filter((node) =>
-                        inputs.some((input) => input.id === node.id)
+                        inputs.some((input) => input.id === node.id),
                       )
                       .map((node, index) => {
                         const input = inputs.find(
-                          (input) => input.id === node.id
+                          (input) => input.id === node.id,
                         )!;
                         return (
                           <div
@@ -241,11 +241,11 @@ export default function IOModal({
                     </div>
                     {nodes
                       .filter((node) =>
-                        outputs.some((output) => output.id === node.id)
+                        outputs.some((output) => output.id === node.id),
                       )
                       .map((node, index) => {
                         const output = outputs.find(
-                          (output) => output.id === node.id
+                          (output) => output.id === node.id,
                         )!;
                         return (
                           <div
@@ -308,7 +308,7 @@ export default function IOModal({
                 <div
                   className={cn(
                     "flex h-full w-full flex-col items-start gap-4 pt-4",
-                    !selectedViewField ? "hidden" : ""
+                    !selectedViewField ? "hidden" : "",
                   )}
                 >
                   <div className="font-xl flex items-center justify-center gap-3 font-semibold">
@@ -327,7 +327,7 @@ export default function IOModal({
                   </div>
                   <div className="h-full w-full">
                     {inputs.some(
-                      (input) => input.id === selectedViewField.id
+                      (input) => input.id === selectedViewField.id,
                     ) ? (
                       <IOFieldView
                         type={InputOutput.INPUT}
@@ -349,7 +349,7 @@ export default function IOModal({
               <div
                 className={cn(
                   "flex h-full w-full",
-                  selectedViewField ? "hidden" : ""
+                  selectedViewField ? "hidden" : "",
                 )}
               >
                 {haveChat ? (
@@ -384,7 +384,7 @@ export default function IOModal({
                   "h-4 w-4",
                   isBuilding
                     ? "animate-spin"
-                    : "fill-current text-medium-indigo"
+                    : "fill-current text-medium-indigo",
                 )}
               />
               Run Flow
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 15a471fff..2b6daf767 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -63,7 +63,7 @@ interface BaseModalProps {
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
     React.ReactElement<TriggerProps>?,
-    React.ReactElement<FooterProps>?
+    React.ReactElement<FooterProps>?,
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
@@ -78,6 +78,7 @@ interface BaseModalProps {
     | "large-h-full"
     | "small-h-full"
     | "medium-h-full"
+    | "md-thin"
     | "smaller-h-full";
 
   disable?: boolean;
@@ -93,16 +94,16 @@ function BaseModal({
   type = "dialog",
 }: BaseModalProps) {
   const headerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Header
+    (child) => (child as React.ReactElement).type === Header,
   );
   const triggerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Trigger
+    (child) => (child as React.ReactElement).type === Trigger,
   );
   const ContentChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Content
+    (child) => (child as React.ReactElement).type === Content,
   );
   const ContentFooter = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Footer
+    (child) => (child as React.ReactElement).type === Footer,
   );
 
   let minWidth: string;
@@ -147,6 +148,12 @@ function BaseModal({
       minWidth = "min-w-[65vw]";
       height = "h-[80vh]";
       break;
+
+    case "md-thin":
+      minWidth = "min-w-[85vw]";
+      height = "h-[70vh]";
+      break;
+
     case "large-h-full":
       minWidth = "min-w-[80vw]";
       break;

From 5ef34e48f300b1c5a8d277320b31c7f525d3d982 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 3 May 2024 10:16:24 -0300
Subject: [PATCH 25/37] =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20add=20`conv?=
 =?UTF-8?q?ertTestName`=20function=20to=20utils.ts=20to=20convert=20card?=
 =?UTF-8?q?=20names=20to=20test=20ids=20=F0=9F=93=9D=20(index.tsx):=20add?=
 =?UTF-8?q?=20`data-testid`=20attribute=20to=20Card=20component=20to=20imp?=
 =?UTF-8?q?rove=20testability=20=F0=9F=93=9D=20(index.tsx):=20remove=20unn?=
 =?UTF-8?q?ecessary=20parentheses=20in=20ternary=20operator=20=F0=9F=93=9D?=
 =?UTF-8?q?=20(index.tsx):=20remove=20unnecessary=20`undefined`=20in=20ter?=
 =?UTF-8?q?nary=20operator=20=F0=9F=93=9D=20(index.tsx):=20add=20`data-tes?=
 =?UTF-8?q?tid`=20attribute=20to=20delete=20button=20to=20improve=20testab?=
 =?UTF-8?q?ility=20=F0=9F=93=9D=20(index.tsx):=20add=20`convertTestName`?=
 =?UTF-8?q?=20function=20to=20utils.ts=20to=20convert=20card=20names=20to?=
 =?UTF-8?q?=20test=20ids=20=F0=9F=93=9D=20(utils.ts):=20add=20`convertTest?=
 =?UTF-8?q?Name`=20function=20to=20convert=20card=20names=20to=20test=20id?=
 =?UTF-8?q?s=20=F0=9F=93=9D=20(deleteComponentFlows.spec.ts):=20add=20end-?=
 =?UTF-8?q?to-end=20tests=20for=20deleting=20a=20flow=20and=20a=20componen?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cardComponent/index.tsx    | 55 ++++++++++---------
 src/frontend/src/utils/utils.ts               | 36 ++++++------
 .../end-to-end/deleteComponentFlows.spec.ts   | 46 ++++++++++++++++
 3 files changed, 94 insertions(+), 43 deletions(-)
 create mode 100644 src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 8b3510f45..e82263513 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -8,7 +8,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import cloneFLowWithParent from "../../utils/storeUtils";
-import { cn } from "../../utils/utils";
+import { cn, convertTestName } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import ShadTooltip from "../shadTooltipComponent";
 import { Badge } from "../ui/badge";
@@ -48,11 +48,11 @@ export default function CollectionCardComponent({
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);
   const [liked_by_user, setLiked_by_user] = useState(
-    data?.liked_by_user ?? false
+    data?.liked_by_user ?? false,
   );
   const [likes_count, setLikes_count] = useState(data?.liked_by_count ?? 0);
   const [downloads_count, setDownloads_count] = useState(
-    data?.downloads_count ?? 0
+    data?.downloads_count ?? 0,
   );
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
@@ -63,7 +63,7 @@ export default function CollectionCardComponent({
   const [openPlayground, setOpenPlayground] = useState(false);
   const [openDelete, setOpenDelete] = useState(false);
   const setCurrentFlowId = useFlowsManagerStore(
-    (state) => state.setCurrentFlowId
+    (state) => state.setCurrentFlowId,
   );
   const [loadingPlayground, setLoadingPlayground] = useState(false);
 
@@ -106,16 +106,18 @@ export default function CollectionCardComponent({
         addFlow(true, newFlow)
           .then((id) => {
             setSuccessData({
-              title: `${name} ${isStore ? "Downloaded" : "Installed"
-                } Successfully.`,
+              title: `${name} ${
+                isStore ? "Downloaded" : "Installed"
+              } Successfully.`,
             });
             setLoading(false);
           })
           .catch((error) => {
             setLoading(false);
             setErrorData({
-              title: `Error ${isStore ? "downloading" : "installing"
-                } the ${name}`,
+              title: `Error ${
+                isStore ? "downloading" : "installing"
+              } the ${name}`,
               list: [error["response"]["data"]["detail"]],
             });
           });
@@ -167,10 +169,11 @@ export default function CollectionCardComponent({
   return (
     <>
       <Card
+        data-testid={`card-${convertTestName(data.name)}`}
         className={cn(
           "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:shadow-md",
           disabled ? "pointer-events-none opacity-50" : "",
-          onClick ? "cursor-pointer" : ""
+          onClick ? "cursor-pointer" : "",
         )}
         onClick={onClick}
       >
@@ -183,7 +186,7 @@ export default function CollectionCardComponent({
                     "flex-shrink-0",
                     data.is_component
                       ? "mx-0.5 h-6 w-6 text-component-icon"
-                      : "h-7 w-7 flex-shrink-0 text-flow-icon"
+                      : "h-7 w-7 flex-shrink-0 text-flow-icon",
                   )}
                   name={data.is_component ? "ToyBrick" : "Group"}
                 />
@@ -235,17 +238,17 @@ export default function CollectionCardComponent({
                 )}
 
                 {onDelete && data?.metadata === undefined && (
-                    <button onClick={(e) => {
+                  <button
+                    onClick={(e) => {
                       e.stopPropagation();
                       setOpenDelete(true);
                     }}
-                    >
-
-                      <IconComponent
-                        name="Trash2"
-                        className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
-                      />
-                    </button>
+                  >
+                    <IconComponent
+                      name="Trash2"
+                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                    />
+                  </button>
                 )}
               </CardTitle>
             </div>
@@ -326,9 +329,7 @@ export default function CollectionCardComponent({
                   )}
                   Playground
                 </Button>
-              ) : (
-                undefined
-              )}
+              ) : undefined}
               {data.liked_by_count != undefined && (
                 <div className="flex gap-0.5">
                   {onDelete && data?.metadata !== undefined ? (
@@ -351,10 +352,11 @@ export default function CollectionCardComponent({
                           }
                         >
                           <IconComponent
+                            data-testid={`delete-${convertTestName(data.name)}`}
                             name="Trash2"
                             className={cn(
                               "h-5 w-5",
-                              !authorized ? " text-ring" : ""
+                              !authorized ? " text-ring" : "",
                             )}
                           />
                         </Button>
@@ -389,7 +391,7 @@ export default function CollectionCardComponent({
                             liked_by_user
                               ? "fill-destructive stroke-destructive"
                               : "",
-                            !authorized ? " text-ring" : ""
+                            !authorized ? " text-ring" : "",
                           )}
                         />
                       </Button>
@@ -427,7 +429,7 @@ export default function CollectionCardComponent({
                         }
                         className={cn(
                           loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
-                          !authorized ? " text-ring" : ""
+                          !authorized ? " text-ring" : "",
                         )}
                       />
                     </Button>
@@ -490,13 +492,12 @@ export default function CollectionCardComponent({
           open={openDelete}
           setOpen={setOpenDelete}
           onConfirm={() => {
-            if(onDelete) onDelete();
+            if (onDelete) onDelete();
           }}
         >
           <></>
         </DeleteConfirmationModal>
-      )
-      }
+      )}
     </>
   );
 }
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 1c580fa4b..43838bb27 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -61,7 +61,7 @@ export function normalCaseToSnakeCase(str: string): string {
 
 export function toTitleCase(
   str: string | undefined,
-  isNodeField?: boolean
+  isNodeField?: boolean,
 ): string {
   if (!str) return "";
   let result = str
@@ -70,7 +70,7 @@ export function toTitleCase(
       if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase()
+          word[0].toUpperCase() + word.slice(1).toLowerCase(),
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -83,7 +83,7 @@ export function toTitleCase(
       if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase()
+          word[0].toUpperCase() + word.slice(1).toLowerCase(),
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -93,8 +93,8 @@ export function toTitleCase(
 
 export function getUnavailableFields(variables: {
   [key: string]: { default_fields?: string[] };
-}): {[name: string]: string} {
-  const unVariables:{[name: string]: string} = {};
+}): { [name: string]: string } {
+  const unVariables: { [name: string]: string } = {};
   Object.keys(variables).forEach((key) => {
     if (variables[key].default_fields) {
       variables[key].default_fields!.forEach((field) => {
@@ -123,7 +123,7 @@ export function groupByFamily(
   data: APIDataType,
   baseClasses: string,
   left: boolean,
-  flow?: NodeType[]
+  flow?: NodeType[],
 ): groupedObjType[] {
   const baseClassesSet = new Set(baseClasses.split("\n"));
   let arrOfPossibleInputs: Array<{
@@ -149,7 +149,7 @@ export function groupByFamily(
         baseClassesSet.has(template.type)) ||
         (template.input_types &&
           template.input_types.some((inputType) =>
-            baseClassesSet.has(inputType)
+            baseClassesSet.has(inputType),
           )))
     );
   };
@@ -169,7 +169,7 @@ export function groupByFamily(
         hasBaseClassInBaseClasses:
           foundNode?.hasBaseClassInBaseClasses ||
           nodeData.node!.base_classes.some((baseClass) =>
-            baseClassesSet.has(baseClass)
+            baseClassesSet.has(baseClass),
           ), //seta como anterior ou verifica se o node tem base class
         displayName: nodeData.node?.display_name,
       });
@@ -186,10 +186,10 @@ export function groupByFamily(
       if (!foundNode) {
         foundNode = {
           hasBaseClassInTemplate: Object.values(node!.template).some(
-            checkBaseClass
+            checkBaseClass,
           ),
           hasBaseClassInBaseClasses: node!.base_classes.some((baseClass) =>
-            baseClassesSet.has(baseClass)
+            baseClassesSet.has(baseClass),
           ),
           displayName: node?.display_name,
         };
@@ -246,7 +246,7 @@ export function getRandomDescription(): string {
 export function getRandomName(
   retry: number = 0,
   noSpace: boolean = false,
-  maxRetries: number = 3
+  maxRetries: number = 3,
 ): string {
   const left: string[] = ADJECTIVES;
   const right: string[] = NOUNS;
@@ -325,7 +325,7 @@ export function getChatInputField(flowState?: FlowState) {
 export function getPythonApiCode(
   flow: FlowType,
   isAuth: boolean,
-  tweak?: any[]
+  tweak?: any[],
 ): string {
   const flowId = flow.id;
 
@@ -393,7 +393,7 @@ print(run_flow(message=message, flow_id=FLOW_ID, tweaks=TWEAKS${
 export function getCurlCode(
   flow: FlowType,
   isAuth: boolean,
-  tweak?: any[]
+  tweak?: any[],
 ): string {
   const flowId = flow.id;
   const tweaks = buildTweaks(flow);
@@ -463,7 +463,7 @@ result = run_flow_from_json(flow="${flowName}.json",
 export function getWidgetCode(
   flow: FlowType,
   isAuth: boolean,
-  flowState?: FlowState
+  flowState?: FlowState,
 ): string {
   const flowId = flow.id;
   const flowName = flow.name;
@@ -593,7 +593,7 @@ export function checkLocalStorageKey(key: string): boolean {
 
 export function IncrementObjectKey(
   object: object,
-  key: string
+  key: string,
 ): { newKey: string; increment: number } {
   let count = 1;
   const type = removeCountFromString(key);
@@ -665,7 +665,7 @@ export function getSetFromObject(obj: object, key?: string): Set<string> {
 
 export function getFieldTitle(
   template: APITemplateType,
-  templateField: string
+  templateField: string,
 ): string {
   return template[templateField].display_name
     ? template[templateField].display_name!
@@ -715,3 +715,7 @@ export function freezeObject(obj: any) {
   if (!obj) return obj;
   return JSON.parse(JSON.stringify(obj));
 }
+
+export function convertTestName(name: string): string {
+  return name.replace(/ /g, "-").toLowerCase();
+}
diff --git a/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts b/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts
new file mode 100644
index 000000000..ecb590aa9
--- /dev/null
+++ b/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts
@@ -0,0 +1,46 @@
+import { test } from "@playwright/test";
+
+test("shoud delete a flow", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByText("Store").nth(0).click();
+  await page.getByTestId("install-Website Content QA").click();
+  await page.waitForTimeout(5000);
+  await page.getByText("My Collection").nth(0).click();
+  await page.getByText("Website Content QA").first().isVisible();
+  await page
+    .getByTestId("card-website-content-qa")
+    .first()
+    .hover()
+    .then(async () => {
+      await page.getByTestId("icon-Trash2").first().click();
+      await page.waitForTimeout(2000);
+    });
+  await page.getByText("Confirm deletion of component?").isVisible();
+  await page.getByText("Delete").nth(1).click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Successfully").first().isVisible();
+});
+
+test("shoud delete a component", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(2000);
+  await page.getByText("Store").nth(0).click();
+  await page.getByTestId("install-Basic RAG").click();
+  await page.waitForTimeout(5000);
+  await page.getByText("My Collection").nth(0).click();
+  await page.getByText("Components").first().click();
+  await page.getByText("Basic RAG").first().isVisible();
+  await page
+    .getByTestId("card-basic-rag")
+    .first()
+    .hover()
+    .then(async () => {
+      await page.getByTestId("icon-Trash2").first().click();
+      await page.waitForTimeout(2000);
+    });
+  await page.getByText("Confirm deletion of component?").isVisible();
+  await page.getByText("Delete").nth(1).click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Successfully").first().isVisible();
+});

From 338a236ee75bb54051c9c33444198b6d5fe822c8 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 3 May 2024 15:19:58 -0300
Subject: [PATCH 26/37] remove isGroupRestriction from shortcut

---
 .../components/nodeToolbarComponent/index.tsx | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 062c49d0f..1203aab65 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -58,7 +58,7 @@ export default function NodeToolbarComponent({
         data.node.template[templateField].type === "Any" ||
         data.node.template[templateField].type === "int" ||
         data.node.template[templateField].type === "dict" ||
-        data.node.template[templateField].type === "NestedDict")
+        data.node.template[templateField].type === "NestedDict"),
   ).length;
   const templates = useTypesStore((state) => state.templates);
   const hasStore = useStoreStore((state) => state.hasStore);
@@ -85,7 +85,7 @@ export default function NodeToolbarComponent({
   const [showconfirmShare, setShowconfirmShare] = useState(false);
   const [showOverrideModal, setShowOverrideModal] = useState(false);
   const [flowComponent, setFlowComponent] = useState<FlowType>(
-    createFlowComponent(cloneDeep(data), version)
+    createFlowComponent(cloneDeep(data), version),
   );
 
   const openInNewTab = (url) => {
@@ -100,7 +100,7 @@ export default function NodeToolbarComponent({
   const updateNodeInternals = useUpdateNodeInternals();
 
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection
+    (state) => state.setLastCopiedSelection,
   );
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -150,7 +150,7 @@ export default function NodeToolbarComponent({
           nodes,
           edges,
           setNodes,
-          setEdges
+          setEdges,
         );
         break;
       case "override":
@@ -174,7 +174,7 @@ export default function NodeToolbarComponent({
             y: 10,
             paneX: nodes.find((node) => node.id === data.id)?.position.x,
             paneY: nodes.find((node) => node.id === data.id)?.position.y,
-          }
+          },
         );
         break;
       case "update":
@@ -212,13 +212,13 @@ export default function NodeToolbarComponent({
   };
 
   const isSaved = flows.some((flow) =>
-    Object.values(flow).includes(data.node?.display_name!)
+    Object.values(flow).includes(data.node?.display_name!),
   );
 
   const setNode = useFlowStore((state) => state.setNode);
 
   const handleOnNewValue = (
-    newValue: string | string[] | boolean | Object[]
+    newValue: string | string[] | boolean | Object[],
   ): void => {
     if (data.node!.template[name].value !== newValue) {
       takeSnapshot();
@@ -325,7 +325,6 @@ export default function NodeToolbarComponent({
       }
       if (
         selected &&
-        !isGroup &&
         (event.ctrlKey || event.metaKey) &&
         event.shiftKey &&
         event.key === "A"
@@ -394,7 +393,7 @@ export default function NodeToolbarComponent({
               data-testid="save-button-modal"
               className={classNames(
                 "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
-                hasCode ? " " : " rounded-l-md "
+                hasCode ? " " : " rounded-l-md ",
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -412,7 +411,7 @@ export default function NodeToolbarComponent({
             <button
               data-testid="duplicate-button-modal"
               className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -460,7 +459,7 @@ export default function NodeToolbarComponent({
                   <div
                     data-testid="more-options-modal"
                     className={classNames(
-                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
+                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
                     )}
                   >
                     <IconComponent

From ebaaf726f9d002312ec62bc9e25db467fd992c15 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 3 May 2024 16:01:58 -0300
Subject: [PATCH 27/37] chore: Add card filter overlay and update flex
 alignment in CollectionCardComponent

---
 src/frontend/src/components/cardComponent/index.tsx | 4 ++--
 src/frontend/src/style/applies.css                  | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index e82263513..ea7022c0f 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -177,6 +177,7 @@ export default function CollectionCardComponent({
         )}
         onClick={onClick}
       >
+        <div className="hover:card-filter absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden"></div>
         <div>
           <CardHeader>
             <div>
@@ -292,7 +293,7 @@ export default function CollectionCardComponent({
 
         <CardFooter>
           <div className="flex w-full items-center justify-between gap-2">
-            <div className="flex w-full flex-wrap items-end justify-between gap-2">
+            <div className="flex w-full flex-wrap items-end justify-end gap-2">
               {playground && data?.metadata !== undefined ? (
                 <Button
                   disabled={loadingPlayground}
@@ -436,7 +437,6 @@ export default function CollectionCardComponent({
                   </ShadTooltip>
                 </div>
               )}
-              {button && button}
               {playground && data?.metadata === undefined && (
                 <Button
                   disabled={loadingPlayground}
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 4b016eb73..a90b5b96c 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -9,7 +9,9 @@
 
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 }
 
@@ -1018,6 +1020,9 @@
   .langflow-chat-span {
     @apply text-lg text-foreground;
   }
+  .card-filter {
+    @apply bg-background bg-fixed opacity-20;
+  }
   .langflow-chat-desc {
     @apply w-2/4 rounded-md border border-border bg-muted px-6 py-8;
   }

From 781ac4fe9d278c9a5a3c4a7f181b629649ae6343 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 3 May 2024 16:04:17 -0300
Subject: [PATCH 28/37] chore: Add z-index to delete button in
 CollectionCardComponent

---
 src/frontend/src/components/cardComponent/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index ea7022c0f..f30969671 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -240,6 +240,7 @@ export default function CollectionCardComponent({
 
                 {onDelete && data?.metadata === undefined && (
                   <button
+                    className="z-50"
                     onClick={(e) => {
                       e.stopPropagation();
                       setOpenDelete(true);

From 142029d91e57a835af02342e46e504d7e30185d9 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 3 May 2024 16:50:23 -0300
Subject: [PATCH 29/37] fix playground on dev

---
 src/frontend/src/components/cardComponent/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index f30969671..7dbaf9d83 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -293,7 +293,7 @@ export default function CollectionCardComponent({
         </div>
 
         <CardFooter>
-          <div className="flex w-full items-center justify-between gap-2">
+          <div className="z-50 flex w-full items-center justify-between gap-2">
             <div className="flex w-full flex-wrap items-end justify-end gap-2">
               {playground && data?.metadata !== undefined ? (
                 <Button
@@ -302,7 +302,7 @@ export default function CollectionCardComponent({
                   tabIndex={-1}
                   variant="outline"
                   size="sm"
-                  className="gap-2 whitespace-nowrap"
+                  className="z-50 gap-2 whitespace-nowrap"
                   data-testid={"playground-flow-button-" + data.id}
                   onClick={(e) => {
                     e.preventDefault();

From cd6473be9dbb999d970435d0d397e8bff80f235a Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 3 May 2024 16:57:05 -0300
Subject: [PATCH 30/37] hide tags while there is no playground

---
 src/frontend/src/components/cardComponent/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 7dbaf9d83..a0e387e9f 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -271,7 +271,7 @@ export default function CollectionCardComponent({
                 </span>
               )}
               <div className="flex w-full flex-1 flex-wrap gap-2">
-                {data.tags &&
+                {/* {data.tags &&
                   data.tags.length > 0 &&
                   data.tags.map((tag, index) => (
                     <Badge
@@ -282,7 +282,7 @@ export default function CollectionCardComponent({
                     >
                       {tag.name}
                     </Badge>
-                  ))}
+                  ))} */}
               </div>
             </div>
 

From 566c3642f627b622b4a27b8243e5b692d216daf2 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa
 <72977554+Cristhianzl@users.noreply.github.com>
Date: Fri, 3 May 2024 17:26:11 -0300
Subject: [PATCH 31/37] Add headers to API Request component (#1832)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

♻️ (APIRequest.py): refactor APIRequest class to improve variable naming and remove unnecessary underscore prefix in headers parameter
💡 (APIRequest.py): update comments in APIRequest class to improve code readability and maintainability
---
 src/backend/base/langflow/components/data/APIRequest.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/backend/base/langflow/components/data/APIRequest.py b/src/backend/base/langflow/components/data/APIRequest.py
index 83a1edb9d..06a5be2ae 100644
--- a/src/backend/base/langflow/components/data/APIRequest.py
+++ b/src/backend/base/langflow/components/data/APIRequest.py
@@ -93,14 +93,14 @@ class APIRequest(CustomComponent):
         self,
         method: str,
         urls: List[str],
-        _headers: Optional[Record] = None,
+        headers: Optional[Record] = None,
         body: Optional[Record] = None,
         timeout: int = 5,
     ) -> List[Record]:
-        if _headers is None:
+        if headers is None:
             headers = {}
         else:
-            headers = _headers.data
+            headers = headers.data
 
         bodies = []
         if body:

From e361228b4833befb5702b8756f32601369b864d2 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 3 May 2024 18:00:50 -0300
Subject: [PATCH 32/37] chore: Update CollectionCardComponent with hover
 background color and card filter overlay

---
 src/frontend/src/components/cardComponent/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index a0e387e9f..52834ee27 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -170,14 +170,14 @@ export default function CollectionCardComponent({
     <>
       <Card
         data-testid={`card-${convertTestName(data.name)}`}
+        //TODO check color schema
         className={cn(
-          "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:shadow-md",
+          "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#202635]",
           disabled ? "pointer-events-none opacity-50" : "",
           onClick ? "cursor-pointer" : "",
         )}
         onClick={onClick}
       >
-        <div className="hover:card-filter absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden"></div>
         <div>
           <CardHeader>
             <div>

From 2dc4ffd99fb8fb935fa344247c19500914a09bd2 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 3 May 2024 18:17:49 -0300
Subject: [PATCH 33/37] fix UI errors

---
 .../addNewVariableButton.tsx                  | 18 ++++++++----
 .../src/components/cardComponent/index.tsx    |  3 +-
 .../src/components/chatComponent/index.tsx    | 10 +++----
 .../components/csvOutputComponent/index.tsx   |  7 +++--
 .../src/components/tableComponent/index.tsx   | 13 +++++++--
 src/frontend/src/modals/IOModal/index.tsx     |  2 +-
 src/frontend/src/modals/baseModal/index.tsx   |  6 ++++
 .../pages/GlobalVariablesPage/index.tsx       | 10 ++++---
 .../pages/ShortcutsPage/index.tsx             | 28 ++++++-------------
 src/frontend/src/utils/utils.ts               |  4 +++
 .../tests/end-to-end/userSettings.spec.ts     |  2 +-
 11 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index f33037ebc..8786cdac6 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -5,6 +5,7 @@ import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { useTypesStore } from "../../stores/typesStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
+import { sortByName } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { Button } from "../ui/button";
@@ -23,14 +24,19 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
   const unavaliableFields = new Set(
-    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
+    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)),
   );
 
-  const availableFields = Array.from(componentFields).filter(
-    (field) => !unavaliableFields.has(field)
-  );
+  const availableFields = () => {
+    const fields = Array.from(componentFields).filter(
+      (field) => !unavaliableFields.has(field),
+    );
+
+    return sortByName(fields);
+  };
+
   const addGlobalVariable = useGlobalVariablesStore(
-    (state) => state.addGlobalVariable
+    (state) => state.addGlobalVariable,
   );
 
   function handleSaveVariable() {
@@ -113,7 +119,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             setSelectedOptions={(value) => setFields(value)}
             selectedOptions={fields}
             password={false}
-            options={availableFields}
+            options={availableFields()}
             placeholder="Choose a field for the variable..."
             id={"apply-to-fields"}
           ></InputComponent>
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 52834ee27..958abffb4 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -11,7 +11,6 @@ import cloneFLowWithParent from "../../utils/storeUtils";
 import { cn, convertTestName } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import ShadTooltip from "../shadTooltipComponent";
-import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import {
   Card,
@@ -172,7 +171,7 @@ export default function CollectionCardComponent({
         data-testid={`card-${convertTestName(data.name)}`}
         //TODO check color schema
         className={cn(
-          "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#202635]",
+          "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
           disabled ? "pointer-events-none opacity-50" : "",
           onClick ? "cursor-pointer" : "",
         )}
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index d483f95ee..d75688161 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -50,7 +50,7 @@ export default function FlowToolbar(): JSX.Element {
             "relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-background hover:bg-hover ",
             !hasApiKey || !validApiKey || !hasStore
               ? " button-disable text-muted-foreground  "
-              : ""
+              : "",
           )}
         >
           <ForwardedIconComponent
@@ -59,14 +59,14 @@ export default function FlowToolbar(): JSX.Element {
               "-m-0.5 -ml-1 h-6 w-6",
               !hasApiKey || !validApiKey || !hasStore
                 ? "extra-side-bar-save-disable"
-                : ""
+                : "",
             )}
           />
           Share
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore]
+    [hasApiKey, validApiKey, currentFlow, hasStore],
   );
 
   return (
@@ -108,7 +108,7 @@ export default function FlowToolbar(): JSX.Element {
                       "message-button-icon h-5 w-5 fill-muted-foreground stroke-muted-foreground transition-all"
                     }
                   />
-                  Run
+                  Playground
                 </div>
               )}
             </div>
@@ -120,7 +120,7 @@ export default function FlowToolbar(): JSX.Element {
                 <ApiModal flow={currentFlow}>
                   <div
                     className={classNames(
-                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover"
+                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
                     )}
                   >
                     <ForwardedIconComponent
diff --git a/src/frontend/src/components/csvOutputComponent/index.tsx b/src/frontend/src/components/csvOutputComponent/index.tsx
index dbe527bc0..fcf59029c 100644
--- a/src/frontend/src/components/csvOutputComponent/index.tsx
+++ b/src/frontend/src/components/csvOutputComponent/index.tsx
@@ -69,7 +69,7 @@ function CsvOutputComponent({
     if (file) {
       const { rowData: data, colDefs: columns } = convertCSVToData(
         file,
-        separator
+        separator,
       );
       setRowData(data);
       setColDefs(columns);
@@ -114,14 +114,14 @@ function CsvOutputComponent({
     (params: any) => {
       updateRowHeight(params);
     },
-    [updateRowHeight]
+    [updateRowHeight],
   );
 
   const onGridSizeChanged = useCallback(
     (params: any) => {
       updateRowHeight(params);
     },
-    [updateRowHeight]
+    [updateRowHeight],
   );
 
   return (
@@ -167,6 +167,7 @@ function CsvOutputComponent({
             onFirstDataRendered={onFirstDataRendered}
             onGridSizeChanged={onGridSizeChanged}
             scrollbarWidth={8}
+            overlayNoRowsTemplate="No data available"
           />
         </div>
       )}
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 300aa5cc3..3404444c5 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -5,6 +5,7 @@ import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
 import { useDarkStore } from "../../stores/darkStore";
 import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
 import { cn } from "../../utils/utils";
+import { Card, CardContent } from "../ui/card";
 
 const TableComponent = forwardRef<
   ElementRef<typeof AgGridReact>,
@@ -17,10 +18,18 @@ const TableComponent = forwardRef<
       <div
         className={cn(
           dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-          "ag-theme-shadcn flex h-full flex-col"
+          "ag-theme-shadcn flex h-full flex-col",
         )} // applying the grid theme
       >
-        <AgGridReact ref={ref} {...props} />
+        <Card x-chunk="dashboard-04-chunk-2" className="pt-4">
+          <CardContent>
+            <AgGridReact
+              overlayNoRowsTemplate="No data available"
+              ref={ref}
+              {...props}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 49283ece0..82350b57e 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -117,7 +117,7 @@ export default function IOModal({
 
   return (
     <BaseModal
-      size={selectedTab === 0 ? "large-thin" : "md-thin"}
+      size={selectedTab === 0 ? "sm-thin" : "md-thin"}
       open={open}
       setOpen={setOpen}
       disable={disable}
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 2b6daf767..8cb6252c3 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -79,6 +79,7 @@ interface BaseModalProps {
     | "small-h-full"
     | "medium-h-full"
     | "md-thin"
+    | "sm-thin"
     | "smaller-h-full";
 
   disable?: boolean;
@@ -154,6 +155,11 @@ function BaseModal({
       height = "h-[70vh]";
       break;
 
+    case "sm-thin":
+      minWidth = "min-w-[65vw]";
+      height = "h-[70vh]";
+      break;
+
     case "large-h-full":
       minWidth = "min-w-[80vw]";
       break;
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 6bf31f245..2ca48050b 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -15,13 +15,13 @@ import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries
+    (state) => state.globalVariablesEntries,
   );
   const removeGlobalVariable = useGlobalVariablesStore(
-    (state) => state.removeGlobalVariable
+    (state) => state.removeGlobalVariable,
   );
   const globalVariables = useGlobalVariablesStore(
-    (state) => state.globalVariables
+    (state) => state.globalVariables,
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
@@ -154,7 +154,7 @@ export default function GlobalVariablesPage() {
             <IconComponent
               name="Trash2"
               className={cn(
-                "h-5 w-5 text-destructive group-disabled:text-primary"
+                "h-5 w-5 text-destructive group-disabled:text-primary",
               )}
             />
           </Button>
@@ -174,6 +174,8 @@ export default function GlobalVariablesPage() {
           }}
           rowSelection="multiple"
           suppressRowClickSelection={true}
+          domLayout="autoHeight"
+          pagination={false}
           columnDefs={colDefs}
           rowData={rowData}
         />
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index de2c92b2d..65bb3387f 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -2,13 +2,6 @@ import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../../../../components/ui/card";
 
 export default function ShortcutsPage() {
   const advancedShortcut = "Ctrl + Shift + A";
@@ -84,7 +77,7 @@ export default function ShortcutsPage() {
       shortcut: redoShortcut,
     },
   ]);
-  
+
   return (
     <div className="flex h-full w-full flex-col gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@@ -97,22 +90,17 @@ export default function ShortcutsPage() {
             />
           </h2>
           <p className="text-sm text-muted-foreground">
-            Manage Shortcuts for quick access to
-            frequently used actions.
+            Manage Shortcuts for quick access to frequently used actions.
           </p>
         </div>
       </div>
       <div className="grid gap-6 pb-8">
-        <Card x-chunk="dashboard-04-chunk-2" className="pt-4">
-          <CardContent>
-            <TableComponent
-              domLayout="autoHeight"
-              pagination={false}
-              columnDefs={colDefs}
-              rowData={nodesRowData}
-            />
-          </CardContent>
-        </Card>
+        <TableComponent
+          domLayout="autoHeight"
+          pagination={false}
+          columnDefs={colDefs}
+          rowData={nodesRowData}
+        />
       </div>
     </div>
   );
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 43838bb27..7c269d8e4 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -719,3 +719,7 @@ export function freezeObject(obj: any) {
 export function convertTestName(name: string): string {
   return name.replace(/ /g, "-").toLowerCase();
 }
+
+export function sortByName(stringList: string[]): string[] {
+  return stringList.sort((a, b) => a.localeCompare(b));
+}
diff --git a/src/frontend/tests/end-to-end/userSettings.spec.ts b/src/frontend/tests/end-to-end/userSettings.spec.ts
index 6f90bb19c..af7c93824 100644
--- a/src/frontend/tests/end-to-end/userSettings.spec.ts
+++ b/src/frontend/tests/end-to-end/userSettings.spec.ts
@@ -63,7 +63,7 @@ test("should interact with global variables", async ({ page }) => {
     .nth(0)
     .click();
   await page.getByTestId("icon-Trash2").click();
-  await page.getByText("No Rows To Show").isVisible();
+  await page.getByText("No data available").isVisible();
 });
 
 test("should see shortcuts", async ({ page }) => {

From 92d39a65003552bf5e546447585b923f77fe24c0 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Date: Fri, 3 May 2024 18:23:41 -0300
Subject: [PATCH 34/37] Fix mark_branch function and refactor
 build_and_cache_graph_from_db function (#1833)

* Fix mark_branch function in Graph class to properly handle visited vertices

* Refactor build_and_cache_graph_from_db function in utils.py to simplify code and remove unnecessary parameter

* Fix retrieval of graph from cache in retrieve_vertices_order function

* Fix possible_id type annotation in get_id_from_search_string function

* Refactor APIRequest class to improve variable naming and remove unnecessary underscore prefix in headers parameter

* Refactor buildVertices function in buildUtils.ts to improve code readability and remove unnecessary variable assignment

* Fix API endpoints in test_endpoints.py to use correct HTTP methods
---
 src/backend/base/langflow/api/utils.py        |  7 +---
 src/backend/base/langflow/api/v1/chat.py      |  7 +---
 .../langflow/components/data/APIRequest.py    |  6 ++--
 src/backend/base/langflow/graph/graph/base.py |  9 ++++-
 .../base/langflow/services/store/service.py   |  2 +-
 src/frontend/src/utils/buildUtils.ts          | 34 ++++++++-----------
 tests/test_endpoints.py                       |  4 +--
 7 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/backend/base/langflow/api/utils.py b/src/backend/base/langflow/api/utils.py
index b9f10d2c4..e2f6e07e7 100644
--- a/src/backend/base/langflow/api/utils.py
+++ b/src/backend/base/langflow/api/utils.py
@@ -205,17 +205,12 @@ async def build_and_cache_graph_from_db(
     flow_id: str,
     session: Session,
     chat_service: "ChatService",
-    graph: Optional[Graph] = None,
 ):
     """Build and cache the graph."""
     flow: Optional[Flow] = session.get(Flow, flow_id)
     if not flow or not flow.data:
         raise ValueError("Invalid flow ID")
-    other_graph = Graph.from_payload(flow.data, flow_id)
-    if graph is None:
-        graph = other_graph
-    else:
-        graph = graph.update(other_graph)
+    graph = Graph.from_payload(flow.data, flow_id)
     await chat_service.set_cache(flow_id, graph)
     return graph
 
diff --git a/src/backend/base/langflow/api/v1/chat.py b/src/backend/base/langflow/api/v1/chat.py
index d44d96e72..30e709664 100644
--- a/src/backend/base/langflow/api/v1/chat.py
+++ b/src/backend/base/langflow/api/v1/chat.py
@@ -79,13 +79,8 @@ async def retrieve_vertices_order(
     """
     try:
         # First, we need to check if the flow_id is in the cache
-        graph = None
         if not data:
-            if cache := await chat_service.get_cache(flow_id):
-                graph = cache.get("result")
-            graph = await build_and_cache_graph_from_db(
-                flow_id=flow_id, session=session, chat_service=chat_service, graph=graph
-            )
+            graph = await build_and_cache_graph_from_db(flow_id=flow_id, session=session, chat_service=chat_service)
         else:
             graph = await build_and_cache_graph_from_data(
                 flow_id=flow_id, graph_data=data.model_dump(), chat_service=chat_service
diff --git a/src/backend/base/langflow/components/data/APIRequest.py b/src/backend/base/langflow/components/data/APIRequest.py
index 06a5be2ae..9f1ca703c 100644
--- a/src/backend/base/langflow/components/data/APIRequest.py
+++ b/src/backend/base/langflow/components/data/APIRequest.py
@@ -98,9 +98,9 @@ class APIRequest(CustomComponent):
         timeout: int = 5,
     ) -> List[Record]:
         if headers is None:
-            headers = {}
+            headers_dict = {}
         else:
-            headers = headers.data
+            headers_dict = headers.data
 
         bodies = []
         if body:
@@ -114,7 +114,7 @@ class APIRequest(CustomComponent):
             bodies += [None] * (len(urls) - len(bodies))  # type: ignore
         async with httpx.AsyncClient() as client:
             results = await asyncio.gather(
-                *[self.make_request(client, method, u, headers, rec, timeout) for u, rec in zip(urls, bodies)]
+                *[self.make_request(client, method, u, headers_dict, rec, timeout) for u, rec in zip(urls, bodies)]
             )
         self.status = results
         return results
diff --git a/src/backend/base/langflow/graph/graph/base.py b/src/backend/base/langflow/graph/graph/base.py
index bddfd6795..1744ac687 100644
--- a/src/backend/base/langflow/graph/graph/base.py
+++ b/src/backend/base/langflow/graph/graph/base.py
@@ -445,9 +445,16 @@ class Graph:
         vertex = self.get_vertex(vertex_id)
         vertex.set_state(state)
 
-    def mark_branch(self, vertex_id: str, state: str):
+    def mark_branch(self, vertex_id: str, state: str, visited: Optional[set] = None):
         """Marks a branch of the graph."""
+        if visited is None:
+            visited = set()
+        visited.add(vertex_id)
+        if vertex_id in visited:
+            return
+
         self.mark_vertex(vertex_id, state)
+
         for child_id in self.parent_child_map[vertex_id]:
             self.mark_branch(child_id, state)
 
diff --git a/src/backend/base/langflow/services/store/service.py b/src/backend/base/langflow/services/store/service.py
index c6205269a..4fabd435c 100644
--- a/src/backend/base/langflow/services/store/service.py
+++ b/src/backend/base/langflow/services/store/service.py
@@ -59,7 +59,7 @@ def get_id_from_search_string(search_string: str) -> Optional[str]:
     Returns:
         Optional[str]: The extracted ID, or None if no ID is found.
     """
-    possible_id = search_string
+    possible_id: Optional[str] = search_string
     if "www.langflow.store/store/" in search_string:
         possible_id = search_string.split("/")[-1]
 
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index 2f5d557c5..ae9bd56f9 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/src/frontend/src/utils/buildUtils.ts
@@ -116,33 +116,29 @@ export async function buildVertices({
   nodes,
   edges,
 }: BuildVerticesParams) {
-  let verticesBuild = useFlowStore.getState().verticesBuild;
   // if startNodeId and stopNodeId are provided
   // something is wrong
   if (startNodeId && stopNodeId) {
     return;
   }
+  let verticesOrderResponse = await updateVerticesOrder(
+    flowId,
+    startNodeId,
+    stopNodeId,
+    nodes,
+    edges
+  );
+  if (onValidateNodes) {
+    try {
+      onValidateNodes(verticesOrderResponse.verticesToRun);
+    } catch (e) {
+      useFlowStore.getState().setIsBuilding(false);
 
-  if (!verticesBuild || startNodeId || stopNodeId) {
-    let verticesOrderResponse = await updateVerticesOrder(
-      flowId,
-      startNodeId,
-      stopNodeId,
-      nodes,
-      edges
-    );
-    if (onValidateNodes) {
-      try {
-        onValidateNodes(verticesOrderResponse.verticesToRun);
-      } catch (e) {
-        useFlowStore.getState().setIsBuilding(false);
-
-        return;
-      }
+      return;
     }
-    if (onGetOrderSuccess) onGetOrderSuccess();
-    verticesBuild = useFlowStore.getState().verticesBuild;
   }
+  if (onGetOrderSuccess) onGetOrderSuccess();
+  let verticesBuild = useFlowStore.getState().verticesBuild;
 
   const verticesIds = verticesBuild?.verticesIds!;
   const verticesLayers = verticesBuild?.verticesLayers!;
diff --git a/tests/test_endpoints.py b/tests/test_endpoints.py
index 23d965b7d..64a5da351 100644
--- a/tests/test_endpoints.py
+++ b/tests/test_endpoints.py
@@ -393,13 +393,13 @@ def test_various_prompts(client, prompt, expected_input_variables):
 
 
 def test_get_vertices_flow_not_found(client, logged_in_headers):
-    response = client.get("/api/v1/build/nonexistent_id/vertices", headers=logged_in_headers)
+    response = client.post("/api/v1/build/nonexistent_id/vertices", headers=logged_in_headers)
     assert response.status_code == 500  # Or whatever status code you've set for invalid ID
 
 
 def test_get_vertices(client, added_flow_with_prompt_and_history, logged_in_headers):
     flow_id = added_flow_with_prompt_and_history["id"]
-    response = client.get(f"/api/v1/build/{flow_id}/vertices", headers=logged_in_headers)
+    response = client.post(f"/api/v1/build/{flow_id}/vertices", headers=logged_in_headers)
     assert response.status_code == 200
     assert "ids" in response.json()
     # The response should contain the list in this order

From 79b5223c19f33cee11d7f07c87eabeeb09a86ccf Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 3 May 2024 18:24:57 -0300
Subject: [PATCH 35/37] =?UTF-8?q?=E2=9C=A8=20(cardComponent/index.tsx):=20?=
 =?UTF-8?q?remove=20trailing=20commas=20in=20useState=20calls=20for=20bett?=
 =?UTF-8?q?er=20code=20consistency=20=E2=99=BB=EF=B8=8F=20(cardComponent/i?=
 =?UTF-8?q?ndex.tsx):=20remove=20unnecessary=20parentheses=20in=20useState?=
 =?UTF-8?q?=20calls=20for=20better=20code=20readability=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in=20className=20attribute=20for=20better=20cod?=
 =?UTF-8?q?e=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx)?=
 =?UTF-8?q?:=20remove=20unnecessary=20whitespace=20in=20className=20attrib?=
 =?UTF-8?q?ute=20for=20better=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(?=
 =?UTF-8?q?cardComponent/index.tsx):=20remove=20unnecessary=20whitespace?=
 =?UTF-8?q?=20in=20className=20attribute=20for=20better=20code=20formattin?=
 =?UTF-8?q?g=20=E2=99=BB=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20?=
 =?UTF-8?q?unnecessary=20whitespace=20in=20className=20attribute=20for=20b?=
 =?UTF-8?q?etter=20code=20formatting=20=E2=99=BB=EF=B8=8F=20(cardComponent?=
 =?UTF-8?q?/index.tsx):=20remove=20unnecessary=20whitespace=20in=20classNa?=
 =?UTF-8?q?me=20attribute=20for=20better=20code=20formatting=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(cardComponent/index.tsx):=20remove=20unnecessary?=
 =?UTF-8?q?=20whitespace=20in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/components/cardComponent/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 958abffb4..ac85926d5 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -442,9 +442,9 @@ export default function CollectionCardComponent({
                   disabled={loadingPlayground}
                   key={data.id}
                   tabIndex={-1}
-                  variant="outline"
+                  variant="primary"
                   size="sm"
-                  className="gap-2 whitespace-nowrap"
+                  className="gap-2 whitespace-nowrap bg-muted"
                   data-testid={"playground-flow-button-" + data.id}
                   onClick={(e) => {
                     e.preventDefault();

From ca85bc0827955d94298fcacad3d21bb351027fa0 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 3 May 2024 18:30:38 -0300
Subject: [PATCH 36/37] =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20remove=20tr?=
 =?UTF-8?q?ailing=20whitespace=20in=20button=20classNames=20to=20improve?=
 =?UTF-8?q?=20code=20readability=20=E2=99=BB=EF=B8=8F=20(index.tsx):=20rem?=
 =?UTF-8?q?ove=20unnecessary=20commas=20in=20dependency=20arrays=20to=20im?=
 =?UTF-8?q?prove=20code=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit


From a2a1642017478f79cb53e69ffaa448a8f41cad0c Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Sat, 4 May 2024 00:57:16 -0300
Subject: [PATCH 37/37] =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20remove=20tr?=
 =?UTF-8?q?ailing=20whitespace=20in=20button=20className=20to=20improve=20?=
 =?UTF-8?q?code=20readability=20=E2=99=BB=EF=B8=8F=20(index.tsx):=20refact?=
 =?UTF-8?q?or=20button=20className=20to=20remove=20unnecessary=20ternary?=
 =?UTF-8?q?=20operator=20and=20improve=20code=20readability=20=E2=99=BB?=
 =?UTF-8?q?=EF=B8=8F=20(index.tsx):=20refactor=20icon=20className=20to=20r?=
 =?UTF-8?q?emove=20unnecessary=20classes=20and=20improve=20code=20readabil?=
 =?UTF-8?q?ity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/components/chatComponent/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index d75688161..7d55f9229 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -103,10 +103,8 @@ export default function FlowToolbar(): JSX.Element {
                   className={`relative inline-flex w-full cursor-not-allowed items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-muted-foreground transition-all duration-150 ease-in-out ease-in-out`}
                 >
                   <ForwardedIconComponent
-                    name="Zap"
-                    className={
-                      "message-button-icon h-5 w-5 fill-muted-foreground stroke-muted-foreground transition-all"
-                    }
+                    name="BotMessageSquareIcon"
+                    className={" h-5 w-5 transition-all"}
                   />
                   Playground
                 </div>