From ec0af06573e9296fa5df72bae0e5f13a0b87bbd1 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 23 Apr 2024 09:26:15 -0300
Subject: [PATCH 001/142] Add playground button to flow cards in MainPage
 (#1752)

* Add playground button to flow cards in MainPage

* Add IOModal component for playground functionality

* Update playground button styling

not working yet
---
 .../src/components/cardComponent/index.tsx    |  3 ++
 .../MainPage/components/components/index.tsx  | 40 ++++++++++++++++---
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 2ec60e0a2..f9eef310e 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -25,11 +25,13 @@ export default function CollectionCardComponent({
   disabled = false,
   button,
   onDelete,
+  playground
 }: {
   data: storeComponent;
   authorized?: boolean;
   disabled?: boolean;
   button?: JSX.Element;
+  playground?:JSX.Element;
   onDelete?: () => void;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
@@ -345,6 +347,7 @@ export default function CollectionCardComponent({
               </div>
             )}
             {button && button}
+            {playground && playground}
           </div>
         </div>
       </CardFooter>
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 65189fa8a..ba5879747 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -14,6 +14,7 @@ import {
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
+import IOModal from "../../../../modals/IOModal";
 
 export default function ComponentsComponent({
   is_component = true,
@@ -21,6 +22,7 @@ export default function ComponentsComponent({
   is_component?: boolean;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
@@ -31,6 +33,7 @@ export default function ComponentsComponent({
   const [pageSize, setPageSize] = useState(20);
   const [pageIndex, setPageIndex] = useState(1);
   const [loadingScreen, setLoadingScreen] = useState(true);
+  const [openPlayground, setOpenPlayground] = useState(false);
 
   const navigate = useNavigate();
 
@@ -75,9 +78,8 @@ export default function ComponentsComponent({
         })
           .then(() => {
             setSuccessData({
-              title: `${
-                is_component ? "Component" : "Flow"
-              } uploaded successfully`,
+              title: `${is_component ? "Component" : "Flow"
+                } uploaded successfully`,
             });
           })
           .catch((error) => {
@@ -142,9 +144,8 @@ export default function ComponentsComponent({
                     onDelete={() => {
                       removeFlow(item.id);
                       setSuccessData({
-                        title: `${
-                          item.is_component ? "Component" : "Flow"
-                        } deleted successfully!`,
+                        title: `${item.is_component ? "Component" : "Flow"
+                          } deleted successfully!`,
                       });
                       resetFilter();
                     }}
@@ -174,6 +175,33 @@ export default function ComponentsComponent({
                         <></>
                       )
                     }
+                    playground={
+                      !is_component ? (
+                        <IOModal open={openPlayground} setOpen={setOpenPlayground}>
+                          <Button
+                            tabIndex={-1}
+                            variant="outline"
+                            size="sm"
+                            className="whitespace-nowrap "
+                            data-testid={
+                              "playground-flow-button-" + item.id + "-" + idx
+                            }
+                            onClick={() => {
+                              setCurrentFlowId(item.id);
+                              setOpenPlayground(true);
+                            }}
+                          >
+                            <IconComponent
+                              name="ExternalLink"
+                              className="main-page-nav-button select-none"
+                            />
+                            Playground
+                          </Button>
+                        </IOModal>
+                      ) : (
+                        <></>
+                      )
+                    }
                   />
                 ))
               ) : (

From bb6ad3939b6b06f505772ea091a48220a20b69a8 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 23 Apr 2024 16:48:00 -0300
Subject: [PATCH 002/142] first implementation, working but not stable

---
 .../src/components/cardComponent/index.tsx    | 56 ++++++++++++++++---
 src/frontend/src/modals/IOModal/index.tsx     |  1 +
 .../MainPage/components/components/index.tsx  | 33 +----------
 3 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index f9eef310e..21701f459 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -18,6 +18,8 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
+import IOModal from "../../modals/IOModal";
+import useFlowStore from "../../stores/flowStore";
 
 export default function CollectionCardComponent({
   data,
@@ -31,7 +33,7 @@ export default function CollectionCardComponent({
   authorized?: boolean;
   disabled?: boolean;
   button?: JSX.Element;
-  playground?:JSX.Element;
+  playground?: boolean;
   onDelete?: () => void;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
@@ -48,9 +50,24 @@ export default function CollectionCardComponent({
   const [downloads_count, setDownloads_count] = useState(
     data?.downloads_count ?? 0
   );
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const setNodes = useFlowStore((state) => state.setNodes);
+  const setEdges = useFlowStore((state) => state.setEdges);
+  const [openPlayground, setOpenPlayground] = useState(false);
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+
+
 
   const name = data.is_component ? "Component" : "Flow";
 
+  useEffect(() => {
+    if (currentFlowId && playground) {
+      setNodes(currentFlow?.data?.nodes ?? []);
+      setEdges(currentFlow?.data?.edges ?? []);
+    }
+  }, [currentFlowId]);
+
   useEffect(() => {
     if (data) {
       setLiked_by_user(data?.liked_by_user ?? false);
@@ -69,18 +86,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"]],
             });
           });
@@ -347,10 +362,33 @@ export default function CollectionCardComponent({
               </div>
             )}
             {button && button}
-            {playground && playground}
+            {playground &&
+              <Button
+                tabIndex={-1}
+                variant="outline"
+                size="sm"
+                className="whitespace-nowrap "
+                data-testid={
+                  "playground-flow-button-" + data.id
+                }
+                onClick={() => {
+                  setCurrentFlowId(data.id);
+                  setOpenPlayground(true);
+                }}
+              >
+                <IconComponent
+                  name="ExternalLink"
+                  className="main-page-nav-button select-none"
+                />
+                Playground
+                {openPlayground && < IOModal open={openPlayground} setOpen={setOpenPlayground}>
+                  <></>
+                </IOModal>}
+              </Button>
+            }
           </div>
         </div>
       </CardFooter>
-    </Card>
+    </Card >
   );
 }
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index c81aecc35..c59368fe5 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -78,6 +78,7 @@ export default function IOModal({
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setNode = useFlowStore((state) => state.setNode);
+  console.log(nodes)
 
   async function updateVertices() {
     return updateVerticesOrder(currentFlow!.id, null);
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index ba5879747..55bc6a511 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -14,15 +14,12 @@ import {
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
-import IOModal from "../../../../modals/IOModal";
-
 export default function ComponentsComponent({
   is_component = true,
 }: {
   is_component?: boolean;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
@@ -33,8 +30,6 @@ export default function ComponentsComponent({
   const [pageSize, setPageSize] = useState(20);
   const [pageIndex, setPageIndex] = useState(1);
   const [loadingScreen, setLoadingScreen] = useState(true);
-  const [openPlayground, setOpenPlayground] = useState(false);
-
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -175,33 +170,7 @@ export default function ComponentsComponent({
                         <></>
                       )
                     }
-                    playground={
-                      !is_component ? (
-                        <IOModal open={openPlayground} setOpen={setOpenPlayground}>
-                          <Button
-                            tabIndex={-1}
-                            variant="outline"
-                            size="sm"
-                            className="whitespace-nowrap "
-                            data-testid={
-                              "playground-flow-button-" + item.id + "-" + idx
-                            }
-                            onClick={() => {
-                              setCurrentFlowId(item.id);
-                              setOpenPlayground(true);
-                            }}
-                          >
-                            <IconComponent
-                              name="ExternalLink"
-                              className="main-page-nav-button select-none"
-                            />
-                            Playground
-                          </Button>
-                        </IOModal>
-                      ) : (
-                        <></>
-                      )
-                    }
+                    playground={!is_component}
                   />
                 ))
               ) : (

From 34ac7f359a44e5e5c729afed968fa8bdf14c4c6e Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 23 Apr 2024 16:53:38 -0300
Subject: [PATCH 003/142] removed console.log

---
 src/frontend/src/modals/IOModal/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index c59368fe5..c81aecc35 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -78,7 +78,6 @@ export default function IOModal({
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setNode = useFlowStore((state) => state.setNode);
-  console.log(nodes)
 
   async function updateVertices() {
     return updateVerticesOrder(currentFlow!.id, null);

From ec94bed45e7fa73c3240e1aa8fd932f42a75593e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 24 Apr 2024 00:27:38 +0200
Subject: [PATCH 004/142] Added user icon even if the autologin is off

---
 .../src/components/headerComponent/index.tsx  | 100 +++++++++++-------
 1 file changed, 60 insertions(+), 40 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 2973fe61a..ed9c33759 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -168,50 +168,70 @@ export default function Header(): JSX.Element {
               />
             </button>
           )}
-          {!autoLogin && (
-            <>
-              <Separator orientation="vertical" />
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <button
-                    className={
-                      "h-7 w-7 rounded-full focus-visible:outline-0 " +
-                      (userData?.profile_image ??
-                        gradients[
-                          parseInt(userData?.id ?? "", 30) % gradients.length
-                        ])
-                    }
-                  />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  {isAdmin && (
+
+          <>
+            <Separator orientation="vertical" />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button
+                  className={
+                    "h-7 w-7 rounded-full focus-visible:outline-0 " +
+                    (userData?.profile_image ??
+                      (userData?.id
+                        ? gradients[
+                            parseInt(userData?.id ?? "", 30) % gradients.length
+                          ]
+                        : "bg-gray-500"))
+                  }
+                />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>General</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={() => navigate("/global-variables")}
+                >
+                  Global Variables
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  className="cursor-pointer"
+                  onClick={() => navigate("/shortcuts")}
+                >
+                  Shortcuts
+                </DropdownMenuItem>
+                {!autoLogin && (
+                  <>
+                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    {isAdmin && (
+                      <DropdownMenuItem
+                        className="cursor-pointer"
+                        onClick={() => navigate("/admin")}
+                      >
+                        Admin Page
+                      </DropdownMenuItem>
+                    )}
                     <DropdownMenuItem
                       className="cursor-pointer"
-                      onClick={() => navigate("/admin")}
+                      onClick={() => navigate("/account/settings")}
                     >
-                      Admin Page
+                      Profile Settings
                     </DropdownMenuItem>
-                  )}
-                  <DropdownMenuItem
-                    className="cursor-pointer"
-                    onClick={() => navigate("/account/settings")}
-                  >
-                    Profile Settings
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    className="cursor-pointer"
-                    onClick={() => {
-                      logout();
-                    }}
-                  >
-                    Sign Out
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </>
-          )}
+                    <DropdownMenuItem
+                      className="cursor-pointer"
+                      onClick={() => {
+                        logout();
+                      }}
+                    >
+                      Sign Out
+                    </DropdownMenuItem>
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
         </div>
       </div>
     </div>

From 1b0eb4f7f3340ac323d7ecda9304713e0e3e780a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 24 Apr 2024 00:51:12 +0200
Subject: [PATCH 005/142] Global Variables Page created

---
 .../src/pages/GlobalVariablesPage/index.tsx   | 23 +++++++++++++++++++
 src/frontend/src/routes.tsx                   |  9 ++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src/frontend/src/pages/GlobalVariablesPage/index.tsx

diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
new file mode 100644
index 000000000..19cb2ce27
--- /dev/null
+++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
@@ -0,0 +1,23 @@
+import IconComponent from "../../components/genericIconComponent";
+import { Button } from "../../components/ui/button";
+
+import PageLayout from "../../components/pageLayout";
+
+export default function GlobalVariablesPage() {
+  return (
+    <PageLayout
+      title="Global Variables"
+      description="Manage and assign global variables to default fields."
+      button={
+        <>
+          <Button data-testid="api-key-button-store" variant="primary">
+            <IconComponent name="Plus" className="mr-2 w-4" />
+            Add Global Variables
+          </Button>
+        </>
+      }
+    >
+      <div className="flex h-full w-full flex-col justify-between">Page</div>
+    </PageLayout>
+  );
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index b48e5147d..239a7d870 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -17,6 +17,7 @@ import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
+import GlobalVariablesPage from "./pages/GlobalVariablesPage";
 
 const Router = () => {
   const navigate = useNavigate();
@@ -126,6 +127,14 @@ const Router = () => {
           </ProtectedAdminRoute>
         }
       />
+      <Route
+        path="/global-variables"
+        element={
+          <ProtectedRoute>
+            <GlobalVariablesPage />
+          </ProtectedRoute>
+        }
+      />
 
       <Route path="/account">
         <Route

From b07b937b20430d5b6d0bd8e1c40e107424238077 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 23 Apr 2024 20:38:04 -0300
Subject: [PATCH 006/142] Update build_and_cache_graph function to handle graph
 data from database and from input data (#1750)

* Update build_and_cache_graph function to handle graph data from database and from input data

* Update get_vertices endpoint to handle graph data from input

* Update build_vertex function to handle graph data from database

* Update build_vertex function to handle graph data from input

* Update FlowDataRequest schema to include optional viewport field
---
 src/backend/base/langflow/api/utils.py      | 13 ++++++++++++-
 src/backend/base/langflow/api/v1/chat.py    | 20 +++++++++++++++-----
 src/backend/base/langflow/api/v1/schemas.py | 12 ++++++++++++
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/backend/base/langflow/api/utils.py b/src/backend/base/langflow/api/utils.py
index 0500917a3..b9f10d2c4 100644
--- a/src/backend/base/langflow/api/utils.py
+++ b/src/backend/base/langflow/api/utils.py
@@ -201,7 +201,7 @@ def format_elapsed_time(elapsed_time: float) -> str:
         return f"{minutes} {minutes_unit}, {seconds} {seconds_unit}"
 
 
-async def build_and_cache_graph(
+async def build_and_cache_graph_from_db(
     flow_id: str,
     session: Session,
     chat_service: "ChatService",
@@ -220,6 +220,17 @@ async def build_and_cache_graph(
     return graph
 
 
+async def build_and_cache_graph_from_data(
+    flow_id: str,
+    chat_service: "ChatService",
+    graph_data: dict,
+):  # -> Graph | Any:
+    """Build and cache the graph."""
+    graph = Graph.from_payload(graph_data, flow_id)
+    await chat_service.set_cache(flow_id, graph)
+    return graph
+
+
 def format_syntax_error_message(exc: SyntaxError) -> str:
     """Format a SyntaxError message for returning to the frontend."""
     if exc.text is None:
diff --git a/src/backend/base/langflow/api/v1/chat.py b/src/backend/base/langflow/api/v1/chat.py
index 9ee4edb03..6a2be44ef 100644
--- a/src/backend/base/langflow/api/v1/chat.py
+++ b/src/backend/base/langflow/api/v1/chat.py
@@ -8,13 +8,15 @@ from fastapi.responses import StreamingResponse
 from loguru import logger
 
 from langflow.api.utils import (
-    build_and_cache_graph,
+    build_and_cache_graph_from_data,
+    build_and_cache_graph_from_db,
     format_elapsed_time,
     format_exception_message,
     get_top_level_vertices,
     parse_exception,
 )
 from langflow.api.v1.schemas import (
+    FlowDataRequest,
     InputValueRequest,
     ResultDataResponse,
     StreamData,
@@ -52,6 +54,7 @@ async def try_running_celery_task(vertex, user_id):
 @router.get("/build/{flow_id}/vertices", response_model=VerticesOrderResponse)
 async def get_vertices(
     flow_id: str,
+    data: Optional[FlowDataRequest] = None,
     stop_component_id: Optional[str] = None,
     start_component_id: Optional[str] = None,
     chat_service: "ChatService" = Depends(get_chat_service),
@@ -76,9 +79,14 @@ async def get_vertices(
     try:
         # First, we need to check if the flow_id is in the cache
         graph = None
-        if cache := await chat_service.get_cache(flow_id):
-            graph = cache.get("result")
-        graph = await build_and_cache_graph(flow_id, session, chat_service, graph)
+        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
+            )
+        else:
+            graph = await build_and_cache_graph_from_data(flow_id=flow_id, data=data, chat_service=chat_service)
         if stop_component_id or start_component_id:
             try:
                 first_layer = graph.sort_vertices(stop_component_id, start_component_id)
@@ -144,7 +152,9 @@ async def build_vertex(
         if not cache:
             # If there's no cache
             logger.warning(f"No cache found for {flow_id}. Building graph starting at {vertex_id}")
-            graph = await build_and_cache_graph(flow_id=flow_id, session=next(get_session()), chat_service=chat_service)
+            graph = await build_and_cache_graph_from_db(
+                flow_id=flow_id, session=next(get_session()), chat_service=chat_service
+            )
         else:
             graph = cache.get("result")
         result_data_response = ResultDataResponse(results={})
diff --git a/src/backend/base/langflow/api/v1/schemas.py b/src/backend/base/langflow/api/v1/schemas.py
index f5d0b97d1..f47637280 100644
--- a/src/backend/base/langflow/api/v1/schemas.py
+++ b/src/backend/base/langflow/api/v1/schemas.py
@@ -294,3 +294,15 @@ class SimplifiedAPIRequest(BaseModel):
     )
     tweaks: Optional[Tweaks] = Field(default=None, description="The tweaks")
     session_id: Optional[str] = Field(default=None, description="The session id")
+
+
+# (alias) type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
+#     nodes: Node<NodeData>[];
+#     edges: Edge<EdgeData>[];
+#     viewport: Viewport;
+# }
+# import ReactFlowJsonObject
+class FlowDataRequest(BaseModel):
+    nodes: List[dict]
+    edges: List[dict]
+    viewport: Optional[dict] = None

From 55e56e19f5204ebe8194754eb45b5e0157b8b56c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 24 Apr 2024 11:12:54 -0300
Subject: [PATCH 007/142] merge from origin/dev

---
 src/frontend/src/types/components/index.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 4fb2ca1b7..87495b10b 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -80,14 +80,6 @@ export type InputGlobalComponentType = {
   editNode?: boolean;
 };
 
-export type InputGlobalComponentType = {
-  disabled: boolean;
-  onChange: (value: string) => void;
-  setDb: (value: boolean) => void;
-  name: string;
-  data: NodeDataType;
-  editNode?: boolean;
-};
 
 export type KeyPairListComponentType = {
   value: any;
@@ -601,6 +593,7 @@ export type IOModalPropsType = {
   open: boolean;
   setOpen: (open: boolean) => void;
   disable?: boolean;
+  isPlayground?: boolean;
 };
 
 export type buttonBoxPropsType = {

From ed10322af2171832c6f334ca299905ee8d594c5d Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 24 Apr 2024 17:50:02 -0300
Subject: [PATCH 008/142] Update setNodes and setEdges functions in
 flowStore.ts to skip saving changes when skipSave parameter is true

---
 src/frontend/src/components/cardComponent/index.tsx |  5 +++--
 src/frontend/src/modals/IOModal/index.tsx           | 10 +++++-----
 src/frontend/src/stores/flowStore.ts                |  8 ++++----
 src/frontend/src/types/zustand/flow/index.ts        |  4 ++--
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 21701f459..20af31351 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -63,8 +63,8 @@ export default function CollectionCardComponent({
 
   useEffect(() => {
     if (currentFlowId && playground) {
-      setNodes(currentFlow?.data?.nodes ?? []);
-      setEdges(currentFlow?.data?.edges ?? []);
+      setNodes(currentFlow?.data?.nodes ?? [],true);
+      setEdges(currentFlow?.data?.edges ?? [],true);
     }
   }, [currentFlowId]);
 
@@ -364,6 +364,7 @@ export default function CollectionCardComponent({
             {button && button}
             {playground &&
               <Button
+                key={data.id}
                 tabIndex={-1}
                 variant="outline"
                 size="sm"
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index c81aecc35..857f1ed25 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -83,11 +83,11 @@ export default function IOModal({
     return updateVerticesOrder(currentFlow!.id, null);
   }
 
-  useEffect(() => {
-    if (open) {
-      updateVertices();
-    }
-  }, [open, currentFlow]);
+  // useEffect(() => {
+  //   if (open) {
+  //     updateVertices();
+  //   }
+  // }, [open, currentFlow]);
 
   async function sendMessage(count = 1): Promise<void> {
     if (isBuilding) return;
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index bcc8f6309..17e32f090 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -149,7 +149,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       edges: applyEdgeChanges(changes, get().edges),
     });
   },
-  setNodes: (change) => {
+  setNodes: (change,skipSave=false) => {
     let newChange = typeof change === "function" ? change(get().nodes) : change;
     let newEdges = cleanEdges(newChange, get().edges);
     const { inputs, outputs } = getInputsAndOutputs(newChange);
@@ -164,7 +164,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
 
     const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding) {
+    if (!get().isBuilding && !skipSave) {
       flowsManager.autoSaveCurrentFlow(
         newChange,
         newEdges,
@@ -172,7 +172,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       );
     }
   },
-  setEdges: (change) => {
+  setEdges: (change,skipSave=false) => {
     let newChange = typeof change === "function" ? change(get().edges) : change;
     set({
       edges: newChange,
@@ -180,7 +180,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
 
     const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding) {
+    if (!get().isBuilding && !skipSave) {
       flowsManager.autoSaveCurrentFlow(
         get().nodes,
         newChange,
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index d88504909..dac3cec52 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -74,8 +74,8 @@ export type FlowStoreType = {
   edges: Edge[];
   onNodesChange: OnNodesChange;
   onEdgesChange: OnEdgesChange;
-  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
+  setNodes: (update: Node[] | ((oldState: Node[]) => Node[]),skipSave?:boolean) => void;
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[]),skipSave?:boolean) => void;
   setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
   getNode: (id: string) => Node | undefined;
   deleteNode: (nodeId: string | Array<string>) => void;

From bafda23b6cc0de388610a5a9459e8fade88aa08c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 24 Apr 2024 18:01:20 -0300
Subject: [PATCH 009/142] fix sorting glitch

---
 src/frontend/src/pages/MainPage/components/components/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 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 55bc6a511..9fca16c3a 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -56,7 +56,7 @@ export default function ComponentsComponent({
     const start = (pageIndex - 1) * pageSize;
     const end = start + pageSize;
     setData(all.slice(start, end));
-  }, [flows, isLoading, pageIndex, pageSize]);
+  }, [isLoading, pageIndex, pageSize]);
 
   const [data, setData] = useState<FlowType[]>([]);
 

From 6d6d1d73dbd79e2bb2ff628de0263e0d935d5c81 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 24 Apr 2024 22:37:20 -0300
Subject: [PATCH 010/142] Feat: add File input component

---
 .../langflow/components/inputs/FileInput.py   | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/backend/base/langflow/components/inputs/FileInput.py

diff --git a/src/backend/base/langflow/components/inputs/FileInput.py b/src/backend/base/langflow/components/inputs/FileInput.py
new file mode 100644
index 000000000..0cd7c12b1
--- /dev/null
+++ b/src/backend/base/langflow/components/inputs/FileInput.py
@@ -0,0 +1,48 @@
+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

From 257e18cf5e61e5e9483ded41f80b3645ae23e903 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 25 Apr 2024 00:10:21 -0300
Subject: [PATCH 011/142] almost perfect not sending edges and node because of
 http web method

---
 .../src/components/cardComponent/index.tsx        |  3 +--
 src/frontend/src/controllers/API/index.ts         | 13 +++++++++----
 src/frontend/src/modals/IOModal/index.tsx         |  9 +++++++++
 src/frontend/src/pages/FlowPage/index.tsx         |  7 +++++++
 src/frontend/src/stores/flowStore.ts              |  9 +++++++--
 src/frontend/src/types/components/index.ts        |  1 +
 src/frontend/src/types/zustand/flow/index.ts      |  2 ++
 src/frontend/src/utils/buildUtils.ts              | 15 ++++++++++++---
 8 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 20af31351..261cd009e 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -58,7 +58,6 @@ export default function CollectionCardComponent({
   const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
 
 
-
   const name = data.is_component ? "Component" : "Flow";
 
   useEffect(() => {
@@ -382,7 +381,7 @@ export default function CollectionCardComponent({
                   className="main-page-nav-button select-none"
                 />
                 Playground
-                {openPlayground && < IOModal open={openPlayground} setOpen={setOpenPlayground}>
+                {openPlayground && < IOModal cleanOnClose={true} open={openPlayground} setOpen={setOpenPlayground}>
                   <></>
                 </IOModal>}
               </Button>
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 920335a97..9dc0b0384 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -1,5 +1,5 @@
-import { AxiosResponse } from "axios";
-import { ReactFlowJsonObject } from "reactflow";
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+import { Edge, ReactFlowJsonObject,Node } from "reactflow";
 import { BASE_URL_API } from "../../constants/constants";
 import { api } from "../../controllers/API/api";
 import {
@@ -906,16 +906,21 @@ export async function updateGlobalVariable(
 export async function getVerticesOrder(
   flowId: string,
   startNodeId?: string | null,
-  stopNodeId?: string | null
+  stopNodeId?: string | null,
+  nodes?:Node[],
+  Edges?:Edge[]
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
   // nodeId is optional and is a query parameter
   // if nodeId is not provided, the API will return all vertices
-  const config = {};
+  const config:AxiosRequestConfig<any> = {};
   if (stopNodeId) {
     config["params"] = { stop_component_id: stopNodeId };
   } else if (startNodeId) {
     config["params"] = { start_component_id: startNodeId };
   }
+  if(nodes && Edges){
+    config.data = {nodes,Edges}
+  }
   return await api.get(`${BASE_URL_API}build/${flowId}/vertices`, config);
 }
 
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 857f1ed25..86c9d6591 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -31,8 +31,10 @@ export default function IOModal({
   open,
   setOpen,
   disable,
+  cleanOnClose=false,
 }: IOModalPropsType): JSX.Element {
   const allNodes = useFlowStore((state) => state.nodes);
+  const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
   const inputs = useFlowStore((state) => state.inputs).filter(
     (input) => input.type !== "ChatInput"
   );
@@ -127,6 +129,13 @@ export default function IOModal({
       open={open}
       setOpen={setOpen}
       disable={disable}
+      onChangeOpenModal={(open)=>{
+        if(!open && cleanOnClose){
+          console.log("cleaning flow pool") 
+          cleanFlowPool();
+        }
+      
+      }}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 8fb792702..b69015395 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -6,18 +6,25 @@ import { useDarkStore } from "../../stores/darkStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import Page from "./components/PageComponent";
 import ExtraSidebar from "./components/extraSidebarComponent";
+import useFlowStore from "../../stores/flowStore";
 
 export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
   const version = useDarkStore((state) => state.version);
+  const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const { id } = useParams();
 
   // Set flow tab id
   useEffect(() => {
     setCurrentFlowId(id!);
+    setOnFlowPage(true);
+    
+    return () => {
+      setOnFlowPage(false);
+    };
   }, [id]);
   return (
     <>
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 17e32f090..736c70d5b 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -44,9 +44,12 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
+import FlowPage from "../pages/FlowPage";
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
 const useFlowStore = create<FlowStoreType>((set, get) => ({
+  onFlowPage: false,
+  setOnFlowPage:(FlowPage=>set({onFlowPage:FlowPage})),
   flowState: undefined,
   flowBuildStatus: {},
   nodes: [],
@@ -164,7 +167,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
 
     const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding && !skipSave) {
+    if (!get().isBuilding && !skipSave && get().onFlowPage) {
       flowsManager.autoSaveCurrentFlow(
         newChange,
         newEdges,
@@ -180,7 +183,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
 
     const flowsManager = useFlowsManagerStore.getState();
-    if (!get().isBuilding && !skipSave) {
+    if (!get().isBuilding && !skipSave && get().onFlowPage) {
       flowsManager.autoSaveCurrentFlow(
         get().nodes,
         newChange,
@@ -560,6 +563,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
       },
       onValidateNodes: validateSubgraph,
+      nodes: !get().onFlowPage ? get().nodes : undefined,
+      edges: !get().onFlowPage ? get().edges : undefined,
     });
     get().setIsBuilding(false);
     get().revertBuiltStatusFromBuilding();
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 87495b10b..8cf20a80f 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -594,6 +594,7 @@ export type IOModalPropsType = {
   setOpen: (open: boolean) => void;
   disable?: boolean;
   isPlayground?: boolean;
+  cleanOnClose?: boolean;
 };
 
 export type buttonBoxPropsType = {
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index dac3cec52..c975eec8d 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -45,6 +45,8 @@ export type FlowPoolType = {
 };
 
 export type FlowStoreType = {
+  onFlowPage: boolean;
+  setOnFlowPage: (onFlowPage: boolean) => void;
   flowPool: FlowPoolType;
   inputs: Array<{ type: string; id: string; displayName: string }>;
   outputs: Array<{ type: string; id: string; displayName: string }>;
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index bc2cc62e7..ac648acb1 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/src/frontend/src/utils/buildUtils.ts
@@ -5,6 +5,7 @@ import useAlertStore from "../stores/alertStore";
 import useFlowStore from "../stores/flowStore";
 import { VertexBuildTypeAPI } from "../types/api";
 import { VertexLayerElementType } from "../types/zustand/flow";
+import { Edge, Node } from "reactflow";
 
 type BuildVerticesParams = {
   flowId: string; // Assuming FlowType is the type for your flow
@@ -21,6 +22,8 @@ type BuildVerticesParams = {
   onBuildError?: (title, list, idList: VertexLayerElementType[]) => void;
   onBuildStart?: (idList: VertexLayerElementType[]) => void;
   onValidateNodes?: (nodes: string[]) => void;
+  nodes?: Node[];
+  edges?: Edge[];
 };
 
 function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
@@ -48,7 +51,9 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
 export async function updateVerticesOrder(
   flowId: string,
   startNodeId?: string | null,
-  stopNodeId?: string | null
+  stopNodeId?: string | null,
+  nodes?:Node[],
+  edges?:Edge[]
 ): Promise<{
   verticesLayers: VertexLayerElementType[][];
   verticesIds: string[];
@@ -59,7 +64,7 @@ export async function updateVerticesOrder(
     const setErrorData = useAlertStore.getState().setErrorData;
     let orderResponse;
     try {
-      orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId);
+      orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId, nodes, edges);
     } catch (error: any) {
       setErrorData({
         title: "Oops! Looks like you missed something",
@@ -101,6 +106,8 @@ export async function buildVertices({
   onBuildError,
   onBuildStart,
   onValidateNodes,
+  nodes,
+  edges,
 }: BuildVerticesParams) {
   let verticesBuild = useFlowStore.getState().verticesBuild;
   // if startNodeId and stopNodeId are provided
@@ -113,7 +120,9 @@ export async function buildVertices({
     let verticesOrderResponse = await updateVerticesOrder(
       flowId,
       startNodeId,
-      stopNodeId
+      stopNodeId,
+      nodes,
+      edges
     );
     if (onValidateNodes) {
       try {

From e799f53116b320b00098ebdbe9b365dbfcde9b4f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 25 Apr 2024 16:23:09 +0200
Subject: [PATCH 012/142] Added grid on table component as a mock

---
 src/frontend/package-lock.json                | 19 +++++
 src/frontend/package.json                     |  1 +
 .../src/components/tableComponent/index.tsx   | 85 +++++++++++++++++++
 .../src/pages/GlobalVariablesPage/index.tsx   |  5 +-
 4 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/components/tableComponent/index.tsx

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 2ec5cdfb3..6bd58b234 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -31,6 +31,7 @@
         "@tailwindcss/line-clamp": "^0.4.4",
         "@types/axios": "^0.14.0",
         "ace-builds": "^1.24.1",
+        "ag-grid-react": "^31.2.1",
         "ansi-to-html": "^0.7.2",
         "axios": "^1.5.0",
         "base64-js": "^1.5.1",
@@ -4325,6 +4326,24 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ag-grid-community": {
+      "version": "31.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.1.tgz",
+      "integrity": "sha512-D+gnUQ4dHZ/EQJmupQnDqcEKiCEeuK5ZxlsIpdPKgHg/23dmW+aEdivtB9nLpSc2IEK0RUpchcSxeUT37Boo5A=="
+    },
+    "node_modules/ag-grid-react": {
+      "version": "31.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.1.tgz",
+      "integrity": "sha512-9UH3xxXRwZfW97oz58KboyCJl4t+zdetopieeHVcttsXX1DvGFDUIEz7A1sQaG8e1DAXLMf3IxoIPrfWheH4XA==",
+      "dependencies": {
+        "ag-grid-community": "31.2.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 338c8a541..49d3fe5ba 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -26,6 +26,7 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@types/axios": "^0.14.0",
     "ace-builds": "^1.24.1",
+    "ag-grid-react": "^31.2.1",
     "ansi-to-html": "^0.7.2",
     "axios": "^1.5.0",
     "base64-js": "^1.5.1",
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
new file mode 100644
index 000000000..d816b55b1
--- /dev/null
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -0,0 +1,85 @@
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
+import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
+import { AgGridReact } from "ag-grid-react";
+import { useState } from "react";
+import { Card, CardContent, CardFooter } from "../ui/card";
+
+export default function TableComponent() {
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState([
+    { headerName: "Variable Name", field: "name", flex: 1, editable: true }, //This column will be twice as wide as the others
+    {
+      field: "type",
+      cellEditor: "agSelectCellEditor",
+      cellEditorParams: {
+        values: ["Prompt", "Credential"],
+        valueListGap: 10,
+      },
+      flex: 1,
+      editable: true,
+    },
+    {
+      field: "value",
+      cellEditor: "agLargeTextCellEditor",
+      cellEditorPopup: true,
+      flex: 2,
+      editable: true,
+    },
+    {
+      headerName: "Default Fields",
+      field: "defaultFields",
+      flex: 1,
+      editable: true,
+    },
+  ]);
+
+  const [rowData, setRowData] = useState([
+    {
+      name: "OpenAI Key",
+      type: "Credential",
+      value: "apijpioj09u302j0982ejf",
+      defaultFields: "Open AI API Key",
+    },
+    {
+      name: "Prompt",
+      type: "Prompt",
+      value: `Answer user's questions based on the document below:
+
+    ---
+    
+    {Document}
+    
+    ---
+    
+    Question:
+    {Question}
+    
+    Answer:
+    `,
+      defaultFields: ["Prompt"],
+    },
+    {
+      name: "Azure Key",
+      type: "Credential",
+      value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
+      defaultFields: ["Azure API Key"],
+    },
+  ]);
+
+  return (
+    <Card className="mb-12 h-full">
+      <CardContent className="flex h-full flex-col pt-4">
+        <div
+          className="ag-theme-quartz h-full" // applying the grid theme
+        >
+          <AgGridReact columnDefs={colDefs} rowData={rowData} />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <div className="text-xs text-muted-foreground">
+          Showing <strong>1-3</strong> of <strong>3</strong> products
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
index 19cb2ce27..4c0aec707 100644
--- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
@@ -2,6 +2,7 @@ import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 
 import PageLayout from "../../components/pageLayout";
+import TableComponent from "../../components/tableComponent";
 
 export default function GlobalVariablesPage() {
   return (
@@ -17,7 +18,9 @@ export default function GlobalVariablesPage() {
         </>
       }
     >
-      <div className="flex h-full w-full flex-col justify-between">Page</div>
+      <div className="flex h-full w-full flex-col justify-between">
+        <TableComponent />
+      </div>
     </PageLayout>
   );
 }

From e22a3300cb5e9b8bd647813172b7ccc1630d6af2 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 25 Apr 2024 13:03:53 -0300
Subject: [PATCH 013/142] Refactor get_vertices function to
 retrieve_vertices_order in chat.py

---
 src/backend/base/langflow/api/v1/chat.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/backend/base/langflow/api/v1/chat.py b/src/backend/base/langflow/api/v1/chat.py
index 6a2be44ef..e839df1c6 100644
--- a/src/backend/base/langflow/api/v1/chat.py
+++ b/src/backend/base/langflow/api/v1/chat.py
@@ -51,8 +51,8 @@ async def try_running_celery_task(vertex, user_id):
     return vertex
 
 
-@router.get("/build/{flow_id}/vertices", response_model=VerticesOrderResponse)
-async def get_vertices(
+@router.post("/build/{flow_id}/vertices", response_model=VerticesOrderResponse)
+async def retrieve_vertices_order(
     flow_id: str,
     data: Optional[FlowDataRequest] = None,
     stop_component_id: Optional[str] = None,
@@ -65,6 +65,7 @@ async def get_vertices(
 
     Args:
         flow_id (str): The ID of the flow.
+        data (Optional[FlowDataRequest], optional): The flow data. Defaults to None.
         stop_component_id (str, optional): The ID of the stop component. Defaults to None.
         start_component_id (str, optional): The ID of the start component. Defaults to None.
         chat_service (ChatService, optional): The chat service dependency. Defaults to Depends(get_chat_service).

From dc71ad261b879ac83fe924d22ad35a51a164a415 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 25 Apr 2024 15:33:34 -0300
Subject: [PATCH 014/142] Fix cleanFlowPool function not being called in
 CollectionCardComponent

---
 src/frontend/src/components/cardComponent/index.tsx | 2 ++
 src/frontend/src/controllers/API/index.ts           | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 261cd009e..7c71c110e 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -40,6 +40,7 @@ export default function CollectionCardComponent({
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
+  const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
   const isStore = false;
   const [loading, setLoading] = useState(false);
   const [loadingLike, setLoadingLike] = useState(false);
@@ -64,6 +65,7 @@ export default function CollectionCardComponent({
     if (currentFlowId && playground) {
       setNodes(currentFlow?.data?.nodes ?? [],true);
       setEdges(currentFlow?.data?.edges ?? [],true);
+      cleanFlowPool();
     }
   }, [currentFlowId]);
 
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 9dc0b0384..be9572398 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -918,10 +918,12 @@ export async function getVerticesOrder(
   } else if (startNodeId) {
     config["params"] = { start_component_id: startNodeId };
   }
+  const data = {}
   if(nodes && Edges){
-    config.data = {nodes,Edges}
+    data["nodes"] = nodes
+    data["edges"] = Edges
   }
-  return await api.get(`${BASE_URL_API}build/${flowId}/vertices`, config);
+  return await api.post(`${BASE_URL_API}build/${flowId}/vertices`,data, config);
 }
 
 export async function postBuildVertex(

From 4317ab35b75b6116b38be0408647307341ef6809 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 25 Apr 2024 16:06:14 -0300
Subject: [PATCH 015/142] Refactor build_and_cache_graph_from_data function in
 chat.py to use model_dump() method for graph data

---
 src/backend/base/langflow/api/v1/chat.py | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/backend/base/langflow/api/v1/chat.py b/src/backend/base/langflow/api/v1/chat.py
index e839df1c6..5d8e4ace3 100644
--- a/src/backend/base/langflow/api/v1/chat.py
+++ b/src/backend/base/langflow/api/v1/chat.py
@@ -87,7 +87,9 @@ async def retrieve_vertices_order(
                 flow_id=flow_id, session=session, chat_service=chat_service, graph=graph
             )
         else:
-            graph = await build_and_cache_graph_from_data(flow_id=flow_id, data=data, chat_service=chat_service)
+            graph = await build_and_cache_graph_from_data(
+                flow_id=flow_id, graph_data=data.model_dump(), chat_service=chat_service
+            )
         if stop_component_id or start_component_id:
             try:
                 first_layer = graph.sort_vertices(stop_component_id, start_component_id)

From 089446b1b76db6d9832086c7a9dbaefd629398ad Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 25 Apr 2024 16:28:03 -0300
Subject: [PATCH 016/142] initial implementation of playground on store, not
 working yet

---
 .../src/components/cardComponent/index.tsx        | 15 +++++++++++++--
 src/frontend/src/pages/StorePage/index.tsx        |  1 +
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 7c71c110e..9e5db5433 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -63,8 +63,19 @@ export default function CollectionCardComponent({
 
   useEffect(() => {
     if (currentFlowId && playground) {
-      setNodes(currentFlow?.data?.nodes ?? [],true);
-      setEdges(currentFlow?.data?.edges ?? [],true);
+      console.log(currentFlowId)
+      if(currentFlow){
+        setNodes(currentFlow?.data?.nodes ?? [],true);
+        setEdges(currentFlow?.data?.edges ?? [],true);
+      }
+      else{
+        getComponent(data.id)
+        .then((res) => {
+          const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
+          setNodes(newFlow?.data?.nodes??[]);
+          setEdges(newFlow?.data?.edges??[]);
+        });  
+      }
       cleanFlowPool();
     }
   }, [currentFlowId]);
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 64df241fb..4bc482f56 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -371,6 +371,7 @@ export default function StorePage(): JSX.Element {
                       data={item}
                       authorized={validApiKey}
                       disabled={loading}
+                      playground={item.last_tested_version?.includes("1.0.0")&& !item.is_component}
                     />
                   </>
                 );

From b8a62a3c7bd771c2f9ffe1984979a1e19abd6e8f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 25 Apr 2024 18:37:23 -0300
Subject: [PATCH 017/142] running flows from store, still need fixes

---
 .../src/components/cardComponent/index.tsx    | 32 +++++++++++--------
 .../MainPage/components/components/index.tsx  |  2 +-
 src/frontend/src/stores/flowsManagerStore.ts  | 10 ++++++
 .../src/types/zustand/flowsManager/index.ts   |  2 ++
 src/frontend/src/utils/storeUtils.ts          |  7 ++--
 5 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 9e5db5433..04f009d22 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -52,6 +52,8 @@ export default function CollectionCardComponent({
     data?.downloads_count ?? 0
   );
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+  const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
@@ -61,21 +63,16 @@ export default function CollectionCardComponent({
 
   const name = data.is_component ? "Component" : "Flow";
 
+  async function getFlowData(){
+    const res = await getComponent(data.id)
+    const newFlow = cloneFLowWithParent(res, res.id, data.is_component,true);
+    return newFlow;
+  }
+
   useEffect(() => {
     if (currentFlowId && playground) {
-      console.log(currentFlowId)
-      if(currentFlow){
         setNodes(currentFlow?.data?.nodes ?? [],true);
         setEdges(currentFlow?.data?.edges ?? [],true);
-      }
-      else{
-        getComponent(data.id)
-        .then((res) => {
-          const newFlow = cloneFLowWithParent(res, res.id, data.is_component);
-          setNodes(newFlow?.data?.nodes??[]);
-          setEdges(newFlow?.data?.edges??[]);
-        });  
-      }
       cleanFlowPool();
     }
   }, [currentFlowId]);
@@ -385,8 +382,17 @@ export default function CollectionCardComponent({
                   "playground-flow-button-" + data.id
                 }
                 onClick={() => {
-                  setCurrentFlowId(data.id);
-                  setOpenPlayground(true);
+                  if(getFlowById(data.id)){
+                    setCurrentFlowId(data.id);
+                    setOpenPlayground(true);
+                  }
+                  else{
+                    getFlowData().then((res) => {
+                      setCurrentFlow(res);
+                      setOpenPlayground(true);
+                    });
+                  
+                  }
                 }}
               >
                 <IconComponent
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 9fca16c3a..bfe11b7ac 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -56,7 +56,7 @@ export default function ComponentsComponent({
     const start = (pageIndex - 1) * pageSize;
     const end = start + pageSize;
     setData(all.slice(start, end));
-  }, [isLoading, pageIndex, pageSize]);
+  }, [flows,isLoading, pageIndex, pageSize]);
 
   const [data, setData] = useState<FlowType[]>([]);
 
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 9471889c3..62e88f99c 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -46,6 +46,16 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     set({ examples });
   },
   currentFlowId: "",
+  setCurrentFlow: (flow: FlowType) => {
+    set((state) => ({
+      currentFlow: flow,
+      currentFlowId: flow.id,
+    }));
+  
+  },
+  getFlowById: (id: string) => {
+    return get().flows.find((flow) => flow.id === id);
+  },
   setCurrentFlowId: (currentFlowId: string) => {
     set((state) => ({
       currentFlowId,
diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts
index 817ddd3d1..16985105a 100644
--- a/src/frontend/src/types/zustand/flowsManager/index.ts
+++ b/src/frontend/src/types/zustand/flowsManager/index.ts
@@ -2,6 +2,7 @@ import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { FlowType } from "../../flow";
 
 export type FlowsManagerStoreType = {
+  getFlowById: (id: string) => FlowType | undefined;
   flows: Array<FlowType>;
   setFlows: (flows: FlowType[]) => void;
   currentFlow: FlowType | undefined;
@@ -50,6 +51,7 @@ export type FlowsManagerStoreType = {
   takeSnapshot: () => void;
   examples: Array<FlowType>;
   setExamples: (examples: FlowType[]) => void;
+  setCurrentFlow: (flow: FlowType) => void;
 };
 
 export type UseUndoRedoOptions = {
diff --git a/src/frontend/src/utils/storeUtils.ts b/src/frontend/src/utils/storeUtils.ts
index e51cf8933..78b7ee7ff 100644
--- a/src/frontend/src/utils/storeUtils.ts
+++ b/src/frontend/src/utils/storeUtils.ts
@@ -6,11 +6,14 @@ import { isInputNode, isOutputNode } from "./reactflowUtils";
 export default function cloneFLowWithParent(
   flow: FlowType,
   parent: string,
-  is_component: boolean
+  is_component: boolean,
+  keepId=false
 ) {
   let childFLow = cloneDeep(flow);
   childFLow.parent = parent;
-  childFLow.id = "";
+  if(!keepId){
+    childFLow.id = "";
+  }
   childFLow.is_component = is_component;
   return childFLow;
 }

From 16bd9f1ee15ff34c9965c7afb754c33fc49b4314 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 26 Apr 2024 01:32:03 +0200
Subject: [PATCH 018/142] Added settings page

---
 .../src/components/headerComponent/index.tsx  | 11 +---
 .../src/pages/GlobalVariablesPage/index.tsx   | 24 +++++----
 src/frontend/src/pages/SettingsPage/index.tsx | 51 +++++++++++++++++++
 src/frontend/src/routes.tsx                   | 25 +++++----
 src/frontend/src/utils/styleUtils.ts          |  2 +
 5 files changed, 84 insertions(+), 29 deletions(-)
 create mode 100644 src/frontend/src/pages/SettingsPage/index.tsx

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index ed9c33759..ff48c5f79 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -190,16 +190,9 @@ export default function Header(): JSX.Element {
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
                   className="cursor-pointer"
-                  onClick={() => navigate("/global-variables")}
+                  onClick={() => navigate("/settings")}
                 >
-                  Global Variables
-                </DropdownMenuItem>
-
-                <DropdownMenuItem
-                  className="cursor-pointer"
-                  onClick={() => navigate("/shortcuts")}
-                >
-                  Shortcuts
+                  Settings
                 </DropdownMenuItem>
                 {!autoLogin && (
                   <>
diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
index 4c0aec707..41e72bcc0 100644
--- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
@@ -1,26 +1,30 @@
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 
-import PageLayout from "../../components/pageLayout";
 import TableComponent from "../../components/tableComponent";
 
 export default function GlobalVariablesPage() {
   return (
-    <PageLayout
-      title="Global Variables"
-      description="Manage and assign global variables to default fields."
-      button={
-        <>
+    <div className="flex h-full w-full flex-col justify-between gap-6">
+      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+        <div className="flex w-full flex-col">
+          <h2 className="text-xl font-bold tracking-tight">Global Variables</h2>
+          <p className="text-muted-foreground">
+            Manage and assign global variables to default fields. You can add
+            new global variables by clicking the button.
+          </p>
+        </div>
+        <div className="flex-shrink-0">
           <Button data-testid="api-key-button-store" variant="primary">
             <IconComponent name="Plus" className="mr-2 w-4" />
             Add Global Variables
           </Button>
-        </>
-      }
-    >
+        </div>
+      </div>
+
       <div className="flex h-full w-full flex-col justify-between">
         <TableComponent />
       </div>
-    </PageLayout>
+    </div>
   );
 }
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
new file mode 100644
index 000000000..0bf50a46e
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { Outlet } from "react-router-dom";
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import PageLayout from "../../components/pageLayout";
+import SidebarNav from "../../components/sidebarComponent";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+
+export default function SettingsPage(): JSX.Element {
+  const pathname = location.pathname;
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
+  useEffect(() => {
+    setCurrentFlowId("");
+  }, [pathname]);
+
+  const sidebarNavItems = [
+    {
+      title: "Global Variables",
+      href: "/settings/global-variables",
+      icon: (
+        <ForwardedIconComponent
+          name="Globe"
+          className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+        />
+      ),
+    },
+    {
+      title: "Keyboard Shortcuts",
+      href: "/settings/shortcuts",
+      icon: (
+        <ForwardedIconComponent name="Keyboard" className="w-5 stroke-[1.5]" />
+      ),
+    },
+  ];
+  return (
+    <PageLayout
+      title="Settings"
+      description="Manage the general settings for Langflow."
+    >
+      <div className="flex h-full w-full space-y-8 lg:flex-row lg:space-x-8 lg:space-y-0">
+        <aside className="flex h-full flex-col space-y-6 lg:w-1/5">
+          <SidebarNav items={sidebarNavItems} />
+        </aside>
+        <div className="h-full w-full flex-1">
+          <Outlet />
+        </div>
+      </div>
+    </PageLayout>
+  );
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 239a7d870..943a953b0 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { ProtectedAdminRoute } from "./components/authAdminGuard";
 import { ProtectedRoute } from "./components/authGuard";
 import { ProtectedLoginRoute } from "./components/authLoginGuard";
@@ -9,15 +9,16 @@ import AdminPage from "./pages/AdminPage";
 import LoginAdminPage from "./pages/AdminPage/LoginPage";
 import ApiKeysPage from "./pages/ApiKeysPage";
 import FlowPage from "./pages/FlowPage";
+import GlobalVariablesPage from "./pages/GlobalVariablesPage";
 import HomePage from "./pages/MainPage";
 import ComponentsComponent from "./pages/MainPage/components/components";
 import ProfileSettingsPage from "./pages/ProfileSettingsPage";
+import SettingsPage from "./pages/SettingsPage";
 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 GlobalVariablesPage from "./pages/GlobalVariablesPage";
 
 const Router = () => {
   const navigate = useNavigate();
@@ -46,6 +47,18 @@ const Router = () => {
           element={<ComponentsComponent key="components" />}
         />
       </Route>
+      <Route
+        path="/settings"
+        element={
+          <ProtectedRoute>
+            <SettingsPage />
+          </ProtectedRoute>
+        }
+      >
+        <Route index element={<Navigate replace to={"global-variables"} />} />
+        <Route path="global-variables" element={<GlobalVariablesPage />} />
+        <Route path="shortcuts" element={<GlobalVariablesPage />} />
+      </Route>
       <Route
         path="/store"
         element={
@@ -127,14 +140,6 @@ const Router = () => {
           </ProtectedAdminRoute>
         }
       />
-      <Route
-        path="/global-variables"
-        element={
-          <ProtectedRoute>
-            <GlobalVariablesPage />
-          </ProtectedRoute>
-        }
-      />
 
       <Route path="/account">
         <Route
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index a0c9c9756..ea646109c 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -67,6 +67,7 @@ import {
   Home,
   Info,
   Key,
+  Keyboard,
   Laptop2,
   Layers,
   Link,
@@ -374,6 +375,7 @@ export const nodeIconsLucide: iconsType = {
   tools: Hammer,
   advanced: Laptop2,
   chat: MessageCircle,
+  Keyboard: Keyboard,
   embeddings: Binary,
   saved_components: GradientSave,
   documentloaders: Paperclip,

From 8536ad8204c47f01d1f7f930b10dba2c1c18812c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 26 Apr 2024 01:37:51 +0200
Subject: [PATCH 019/142] Added more settings options

---
 src/frontend/src/pages/SettingsPage/index.tsx | 42 ++++++++++++++++++-
 src/frontend/src/utils/styleUtils.ts          |  6 +++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index 0bf50a46e..48941fd06 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -15,6 +15,46 @@ export default function SettingsPage(): JSX.Element {
   }, [pathname]);
 
   const sidebarNavItems = [
+    {
+        title: "General",
+        href: "/settings/general",
+        icon: (
+          <ForwardedIconComponent
+            name="SlidersHorizontal"
+            className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+          />
+        ),
+      },
+      {
+        title: "Theme",
+        href: "/settings/theme",
+        icon: (
+          <ForwardedIconComponent
+            name="Palette"
+            className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+          />
+        ),
+      },
+      {
+        title: "Bundles",
+        href: "/settings/bundles",
+        icon: (
+          <ForwardedIconComponent
+            name="Boxes"
+            className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+          />
+        ),
+      },
+      {
+        title: "Integrations",
+        href: "/settings/integrations",
+        icon: (
+          <ForwardedIconComponent
+            name="Blocks"
+            className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+          />
+        ),
+      },
     {
       title: "Global Variables",
       href: "/settings/global-variables",
@@ -26,7 +66,7 @@ export default function SettingsPage(): JSX.Element {
       ),
     },
     {
-      title: "Keyboard Shortcuts",
+      title: "Shortcuts",
       href: "/settings/shortcuts",
       icon: (
         <ForwardedIconComponent name="Keyboard" className="w-5 stroke-[1.5]" />
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index ea646109c..25e5ec4fb 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -5,6 +5,7 @@ import {
   ArrowUpToLine,
   Bell,
   Binary,
+  Blocks,
   BookMarked,
   BookmarkPlus,
   Bot,
@@ -87,6 +88,7 @@ import {
   MoreHorizontal,
   Network,
   Package2,
+  Palette,
   Paperclip,
   Pencil,
   PencilLine,
@@ -109,6 +111,7 @@ import {
   Share2,
   Shield,
   Sliders,
+  SlidersHorizontal,
   Snowflake,
   Sparkles,
   Square,
@@ -414,6 +417,9 @@ export const nodeIconsLucide: iconsType = {
   MoonIcon,
   Bell,
   ChevronLeft,
+  SlidersHorizontal,
+  Palette,
+  Blocks,
   ChevronDown,
   ArrowLeft,
   Shield,

From 2dd0b2bf169cc8a0334e405505c88fde32b54091 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 25 Apr 2024 21:38:53 -0300
Subject: [PATCH 020/142] add type import

---
 src/frontend/package-lock.json                | 412 +++++++++---------
 src/frontend/package.json                     |   1 +
 .../src/components/tableComponent/index.tsx   |  10 +-
 3 files changed, 220 insertions(+), 203 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 6bd58b234..5e6b7fe67 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -31,6 +31,7 @@
         "@tailwindcss/line-clamp": "^0.4.4",
         "@types/axios": "^0.14.0",
         "ace-builds": "^1.24.1",
+        "ag-grid-community": "^31.2.1",
         "ag-grid-react": "^31.2.1",
         "ansi-to-html": "^0.7.2",
         "axios": "^1.5.0",
@@ -167,25 +168,25 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz",
-      "integrity": "sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
+      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.3.tgz",
-      "integrity": "sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz",
+      "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.1",
+        "@babel/generator": "^7.24.4",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.24.1",
-        "@babel/parser": "^7.24.1",
+        "@babel/helpers": "^7.24.4",
+        "@babel/parser": "^7.24.4",
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
         "@babel/types": "^7.24.0",
@@ -204,9 +205,9 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
-      "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz",
+      "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==",
       "dependencies": {
         "@babel/types": "^7.24.0",
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -339,9 +340,9 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.1.tgz",
-      "integrity": "sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.4.tgz",
+      "integrity": "sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==",
       "dependencies": {
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
@@ -366,9 +367,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
-      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
+      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -377,9 +378,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
-      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -906,9 +907,9 @@
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@headlessui/react": {
-      "version": "1.7.18",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
-      "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==",
+      "version": "1.7.19",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
+      "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==",
       "dependencies": {
         "@tanstack/react-virtual": "^3.0.0-beta.60",
         "client-only": "^0.0.1"
@@ -2790,11 +2791,11 @@
       }
     },
     "node_modules/@reactflow/background": {
-      "version": "11.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
-      "integrity": "sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==",
+      "version": "11.3.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.12.tgz",
+      "integrity": "sha512-jBuWVb43JQy5h4WOS7G0PU8voGTEJNA+qDmx8/jyBtrjbasTesLNfQvboTGjnQYYiJco6mw5vrtQItAJDNoIqw==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2804,11 +2805,11 @@
       }
     },
     "node_modules/@reactflow/controls": {
-      "version": "11.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.9.tgz",
-      "integrity": "sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==",
+      "version": "11.2.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.12.tgz",
+      "integrity": "sha512-L9F3+avFRShoprdT+5oOijm5gVsz2rqWCXBzOAgD923L1XFGIspdiHLLf8IlPGsT+mfl0GxbptZhaEeEzl1e3g==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2818,9 +2819,9 @@
       }
     },
     "node_modules/@reactflow/core": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.10.4.tgz",
-      "integrity": "sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==",
+      "version": "11.11.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.2.tgz",
+      "integrity": "sha512-+GfgyskweL1PsgRSguUwfrT2eDotlFgaKfDLm7x0brdzzPJY2qbCzVetaxedaiJmIli3817iYbILvE9qLKwbRA==",
       "dependencies": {
         "@types/d3": "^7.4.0",
         "@types/d3-drag": "^3.0.1",
@@ -2838,11 +2839,11 @@
       }
     },
     "node_modules/@reactflow/minimap": {
-      "version": "11.7.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.9.tgz",
-      "integrity": "sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==",
+      "version": "11.7.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.12.tgz",
+      "integrity": "sha512-SRDU77c2PCF54PV/MQfkz7VOW46q7V1LZNOQlXAp7dkNyAOI6R+tb9qBUtUJOvILB+TCN6pRfD9fQ+2T99bW3Q==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "@types/d3-selection": "^3.0.3",
         "@types/d3-zoom": "^3.0.1",
         "classcat": "^5.0.3",
@@ -2856,11 +2857,11 @@
       }
     },
     "node_modules/@reactflow/node-resizer": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.9.tgz",
-      "integrity": "sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==",
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.12.tgz",
+      "integrity": "sha512-6LHJGuI1zHyRrZHw5gGlVLIWnvVxid9WIqw8FMFSg+oF2DuS3pAPwSoZwypy7W22/gDNl9eD1Dcl/OtFtDFQ+w==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.4",
         "d3-drag": "^3.0.0",
         "d3-selection": "^3.0.0",
@@ -2872,11 +2873,11 @@
       }
     },
     "node_modules/@reactflow/node-toolbar": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.9.tgz",
-      "integrity": "sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==",
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.12.tgz",
+      "integrity": "sha512-4kJRvNna/E3y2MZW9/80wTKwkhw4pLJiz3D5eQrD13XcmojSb1rArO9CiwyrI+rMvs5gn6NlCFB4iN1F+Q+lxQ==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2886,9 +2887,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -3204,9 +3205,9 @@
       "dev": true
     },
     "node_modules/@swc/core": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.11.tgz",
-      "integrity": "sha512-WKEakMZxkVwRdgMN4AMJ9K5nysY8g8npgQPczmjBeNK5In7QEAZAJwnyccrWwJZU0XjVeHn2uj+XbOKdDW17rg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-fjADAC5gOOX54Rpcr1lF9DHLD+nPD5H/zXLtEgK2Ez3esmogT+LfHzCZtUxqetjvaMChKhQ0Pp0ZB6Hpz/tCbw==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -3221,16 +3222,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.4.11",
-        "@swc/core-darwin-x64": "1.4.11",
-        "@swc/core-linux-arm-gnueabihf": "1.4.11",
-        "@swc/core-linux-arm64-gnu": "1.4.11",
-        "@swc/core-linux-arm64-musl": "1.4.11",
-        "@swc/core-linux-x64-gnu": "1.4.11",
-        "@swc/core-linux-x64-musl": "1.4.11",
-        "@swc/core-win32-arm64-msvc": "1.4.11",
-        "@swc/core-win32-ia32-msvc": "1.4.11",
-        "@swc/core-win32-x64-msvc": "1.4.11"
+        "@swc/core-darwin-arm64": "1.5.0",
+        "@swc/core-darwin-x64": "1.5.0",
+        "@swc/core-linux-arm-gnueabihf": "1.5.0",
+        "@swc/core-linux-arm64-gnu": "1.5.0",
+        "@swc/core-linux-arm64-musl": "1.5.0",
+        "@swc/core-linux-x64-gnu": "1.5.0",
+        "@swc/core-linux-x64-musl": "1.5.0",
+        "@swc/core-win32-arm64-msvc": "1.5.0",
+        "@swc/core-win32-ia32-msvc": "1.5.0",
+        "@swc/core-win32-x64-msvc": "1.5.0"
       },
       "peerDependencies": {
         "@swc/helpers": "^0.5.0"
@@ -3242,9 +3243,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.11.tgz",
-      "integrity": "sha512-C1j1Qp/IHSelVWdEnT7f0iONWxQz6FAqzjCF2iaL+0vFg4V5f2nlgrueY8vj5pNNzSGhrAlxsMxEIp4dj1MXkg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.5.0.tgz",
+      "integrity": "sha512-dyA25zQjm3xmMFsRPFgBpSqWSW9TITnkndZkZAiPYLjBxH9oTNMa0l09BePsaqEeXySY++tUgAeYu/9onsHLbg==",
       "cpu": [
         "arm64"
       ],
@@ -3258,9 +3259,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.11.tgz",
-      "integrity": "sha512-0TTy3Ni8ncgaMCchSQ7FK8ZXQLlamy0FXmGWbR58c+pVZWYZltYPTmheJUvVcR0H2+gPAymRKyfC0iLszDALjg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.5.0.tgz",
+      "integrity": "sha512-cO7kZMMA/fcQIBT31LBzcVNSk3AZGVYLqvEPnJhFImjPm3mGKUd6kWpARUEGR68MyRU2VsWhE6eCjMcM+G7bxw==",
       "cpu": [
         "x64"
       ],
@@ -3274,9 +3275,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.11.tgz",
-      "integrity": "sha512-XJLB71uw0rog4DjYAPxFGAuGCBQpgJDlPZZK6MTmZOvI/1t0+DelJ24IjHIxk500YYM26Yv47xPabqFPD7I2zQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.5.0.tgz",
+      "integrity": "sha512-BXaXytS4y9lBFRO6vwA6ovvy1d2ZIzS02i2R1oegoZzzNu89CJDpkYXYS9bId0GvK2m9Q9y2ofoZzKE2Rp3PqQ==",
       "cpu": [
         "arm"
       ],
@@ -3290,9 +3291,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.11.tgz",
-      "integrity": "sha512-vYQwzJvm/iu052d5Iw27UFALIN5xSrGkPZXxLNMHPySVko2QMNNBv35HLatkEQHbQ3X+VKSW9J9SkdtAvAVRAQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.5.0.tgz",
+      "integrity": "sha512-Bu4/41pGadXKnRsUbox0ig63xImATVH704oPCXcoOvNGkDyMjWgIAhzIi111vrwFNpj9utabgUE4AtlUa2tAOQ==",
       "cpu": [
         "arm64"
       ],
@@ -3306,9 +3307,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.11.tgz",
-      "integrity": "sha512-eV+KduiRYUFjPsvbZuJ9aknQH9Tj0U2/G9oIZSzLx/18WsYi+upzHbgxmIIHJ2VJgfd7nN40RI/hMtxNsUzR/g==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.5.0.tgz",
+      "integrity": "sha512-lUFFvC8tsepNcTnKEHNrePWanVVef6PQ82Rv9wIeebgGHRUqDh6+CyCqodXez+aKz6NyE/PBIfp0r+jPx4hoJA==",
       "cpu": [
         "arm64"
       ],
@@ -3322,9 +3323,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.11.tgz",
-      "integrity": "sha512-WA1iGXZ2HpqM1OR9VCQZJ8sQ1KP2or9O4bO8vWZo6HZJIeoQSo7aa9waaCLRpkZvkng1ct/TF/l6ymqSNFXIzQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.0.tgz",
+      "integrity": "sha512-c6LegFU1qdyMfk+GzNIOvrX61+mksm21Q01FBnXSy1nf1ACj/a86jmr3zkPl0zpNVHfPOw3Ry1QIuLQKD+67YA==",
       "cpu": [
         "x64"
       ],
@@ -3338,9 +3339,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.11.tgz",
-      "integrity": "sha512-UkVJToKf0owwQYRnGvjHAeYVDfeimCEcx0VQSbJoN7Iy0ckRZi7YPlmWJU31xtKvikE2bQWCOVe0qbSDqqcWXA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.0.tgz",
+      "integrity": "sha512-I/V8aWBmfDWwjtM1bS8ASG+6PcO/pVFYyPP5g2ok46Vz1o1MnAUd18mHnWX43nqVJokaW+BD/G4ZMZ+gXRl4zQ==",
       "cpu": [
         "x64"
       ],
@@ -3354,9 +3355,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.11.tgz",
-      "integrity": "sha512-35khwkyly7lF5NDSyvIrukBMzxPorgc5iTSDfVO/LvnmN5+fm4lTlrDr4tUfTdOhv3Emy7CsKlsNAeFRJ+Pm+w==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.5.0.tgz",
+      "integrity": "sha512-nN685BvI7iM58xabrSOSQHUvIY10pcXh5H9DmS8LeYqG6Dkq7QZ8AwYqqonOitIS5C35MUfhSMLpOTzKoLdUqA==",
       "cpu": [
         "arm64"
       ],
@@ -3370,9 +3371,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.11.tgz",
-      "integrity": "sha512-Wx8/6f0ufgQF2pbVPsJ2dAmFLwIOW+xBE5fxnb7VnEbGkTgP1qMDWiiAtD9rtvDSuODG3i1AEmAak/2HAc6i6A==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.5.0.tgz",
+      "integrity": "sha512-3YjltmEHljI+TvuDOC4lspUzjBUoB3X5BhftRBprSTJx/czuMl0vdoZKs2Snzb5Eqqesp0Rl8q+iQ1E1oJ6dEA==",
       "cpu": [
         "ia32"
       ],
@@ -3386,9 +3387,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.11.tgz",
-      "integrity": "sha512-0xRFW6K9UZQH2NVC/0pVB0GJXS45lY24f+6XaPBF1YnMHd8A8GoHl7ugyM5yNUTe2AKhSgk5fJV00EJt/XBtdQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.5.0.tgz",
+      "integrity": "sha512-ZairtCwJsaxnUH85DcYCyGpNb9bUoIm9QXYW+VaEoXwbcB95dTIiJwN0aRxPT8B0B2MNw/CXLqjoPo6sDwz5iw==",
       "cpu": [
         "x64"
       ],
@@ -3488,11 +3489,11 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
-      "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.4.0.tgz",
+      "integrity": "sha512-GZN4xn/Tg5w7gvYeVcMVCeL4pEyUhvg+Cp6KX2Z01C4FRNxIWMgIQ9ibgMarNQfo+gt0PVLcEER4A9sNv/jlow==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.2.0"
+        "@tanstack/virtual-core": "3.4.0"
       },
       "funding": {
         "type": "github",
@@ -3504,32 +3505,32 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
-      "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.4.0.tgz",
+      "integrity": "sha512-75jXqXxqq5M5Veb9KP1STi8kA5u408uOOAefk2ftHDGCpUk3RP6zX++QqfbmHJTBiU72NQ+ghgCZVts/Wocz8Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "9.3.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
-      "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.0.0.tgz",
+      "integrity": "sha512-PmJPnogldqoVFf+EwbHvbBJ98MmqASV8kLrBYgsDNxQcFMeIS7JFL48sfyXvuMtgmWO/wMhh25odr+8VhDmn4g==",
       "dev": true,
       "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
         "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
+        "aria-query": "5.3.0",
         "chalk": "^4.1.0",
         "dom-accessibility-api": "^0.5.9",
         "lz-string": "^1.5.0",
         "pretty-format": "^27.0.2"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/@testing-library/dom/node_modules/ansi-styles": {
@@ -3749,6 +3750,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/@testing-library/react/node_modules/aria-query": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "dev": true,
+      "dependencies": {
+        "deep-equal": "^2.0.5"
+      }
+    },
     "node_modules/@testing-library/react/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4203,9 +4213,9 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "node_modules/@types/node": {
-      "version": "16.18.93",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.93.tgz",
-      "integrity": "sha512-epWuohp6c0bQt0j3RYCiP9x52axHVn+CjS1Rx1VjPwF+ySg8lrigH3yXGs88XqnA+jGM2qnSMuFTsBxft+hO1Q==",
+      "version": "16.18.96",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.96.tgz",
+      "integrity": "sha512-84iSqGXoO+Ha16j8pRZ/L90vDMKX04QTYMTfYeE1WrjWaZXuchBehGUZEpNgx7JnmlrIHdnABmpjrQjhCnNldQ==",
       "devOptional": true
     },
     "node_modules/@types/prop-types": {
@@ -4214,18 +4224,18 @@
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.73",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz",
-      "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.0.tgz",
+      "integrity": "sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.23",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.23.tgz",
-      "integrity": "sha512-ZQ71wgGOTmDYpnav2knkjr3qXdAFu0vsk8Ci5w3pGAIdj7/kKAyn+VsQDhXsmzzzepAiI9leWMmubXz690AI/A==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "devOptional": true,
       "dependencies": {
         "@types/react": "*"
@@ -4285,9 +4295,9 @@
       "deprecated": "Use your platform's native atob() and btoa() methods instead"
     },
     "node_modules/ace-builds": {
-      "version": "1.32.9",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.32.9.tgz",
-      "integrity": "sha512-dqBLPj//Gq0b92YUtRIsdWsORf4J+4xW3r8/4Wr2Vqid7O1j7YBV/ZsVvWBjZFy+EnvMCRFCFOEIM1cbt4BQ/g=="
+      "version": "1.33.1",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.33.1.tgz",
+      "integrity": "sha512-pj5mcXV1n3s86UI4SWUt8X0ltN8cTaYcvF76cSmvy5i2ZDtXX9KkjVcYTGkCV7ox6VUrzqHByeqH0xRsMjXi4g=="
     },
     "node_modules/acorn": {
       "version": "8.11.3",
@@ -4463,12 +4473,12 @@
       }
     },
     "node_modules/aria-query": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "dependencies": {
-        "deep-equal": "^2.0.5"
+        "dequal": "^2.0.3"
       }
     },
     "node_modules/array-buffer-byte-length": {
@@ -4908,9 +4918,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001603",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz",
-      "integrity": "sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==",
+      "version": "1.0.30001612",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
+      "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
       "funding": [
         {
           "type": "opencollective",
@@ -5021,9 +5031,9 @@
       }
     },
     "node_modules/classcat": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
-      "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g=="
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
     },
     "node_modules/cli-cursor": {
       "version": "4.0.0",
@@ -5371,9 +5381,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.9.0.tgz",
-      "integrity": "sha512-9JsDx4E+30kPxThE+6yEwQokqg1957uwTx/skP2RE98fG6Ten6U+S9YXeQg1a3CI958aF5aOb0oEA+KZFfrZUA==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.2.tgz",
+      "integrity": "sha512-eCWS1W/JPyxW9IvlgW5m0R6rp9ZhRsBTW37rvEUthckkjsV04u8XipV519OoccSA46ixhSJa3q7XLI1WUFtRCA==",
       "dev": true,
       "dependencies": {
         "css-selector-tokenizer": "^0.8",
@@ -5678,9 +5688,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.11.tgz",
-      "integrity": "sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.0.tgz",
+      "integrity": "sha512-yoU4rhgPKCo+p5UrWWWNKiIq+ToGqmVVhk0PmMYBK4kRsR3/qhemNFL8f6CFmBd4gMwm3F4T7HBoydP5uY07fA=="
     },
     "node_modules/dot-case": {
       "version": "3.0.4",
@@ -5708,9 +5718,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.723",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.723.tgz",
-      "integrity": "sha512-rxFVtrMGMFROr4qqU6n95rUi9IlfIm+lIAt+hOToy/9r6CDv0XiEcQdC3VP71y1pE5CFTzKV0RvxOGYCPWWHPw=="
+      "version": "1.4.749",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.749.tgz",
+      "integrity": "sha512-LRMMrM9ITOvue0PoBrvNIraVmuDbJV5QC9ierz/z5VilMdPOVMjOtpICNld3PuXuTZ3CHH/UPxX9gHhAPwi+0Q=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -6665,9 +6675,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.0.24",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.24.tgz",
-      "integrity": "sha512-l2iM8NR53qtcujgAqYvGPJJGModPNWEVUaATRDLfnaLvUoFpImovBm0AHalSSsY8tW6knP8mfJTW4WYGbnAe4w==",
+      "version": "11.1.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.7.tgz",
+      "integrity": "sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -9380,9 +9390,9 @@
       }
     },
     "node_modules/nwsapi": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ=="
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.9.tgz",
+      "integrity": "sha512-2f3F0SEEer8bBu0dsNCFF50N0cTThV1nWFYcEYFZttdW0lDAoybv9cQoK7X7/68Z89S7FoRrVjP1LPX4XRf9vg=="
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -9738,9 +9748,9 @@
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz",
+      "integrity": "sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==",
       "engines": {
         "node": "14 || >=16.14"
       }
@@ -10348,9 +10358,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/property-information": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.1.tgz",
-      "integrity": "sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -10427,9 +10437,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.0.tgz",
+      "integrity": "sha512-RPutkJftSAldDibyrjuku7q11d3oy6wKOyPe5K1HA/HwwrXcEqBdHsLypkC2FFYjP7bPUa6gbzSBhw4sY2JcDg==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -10467,15 +10477,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-zaKdLBftQJnvb7FtDIpZtsAIb2MZU087RM8bRDZU8LVCCFYjPTsDZJNFUWPcVz3HFSN1n/caxi0ca4B/aaVQGQ==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.1"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.0"
       }
     },
     "node_modules/react-draggable": {
@@ -10503,9 +10513,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
-      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
       "peerDependencies": {
         "react": "*"
       }
@@ -10559,23 +10569,23 @@
       }
     },
     "node_modules/react-markdown/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.0.tgz",
+      "integrity": "sha512-wRiUsea88TjKDc4FBEn+sLvIDesp6brMbGWnJGjew2waAc9evdhja/2LvePc898HJbHw0L+MTWy7NhpnELAvLQ=="
     },
     "node_modules/react-reconciler": {
-      "version": "0.29.0",
-      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz",
-      "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==",
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.1.tgz",
+      "integrity": "sha512-xyrmljHU7F5cn1jngF+qPlbSZwstjSOW2BYwkv2LTIv37/BOCJ1XW7Z4iyMxofRJexBueKkhmlX8G2Y01hQx9w==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.1"
       },
       "engines": {
         "node": ">=0.10.0"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.0"
       }
     },
     "node_modules/react-remove-scroll": {
@@ -10624,11 +10634,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
       "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.16.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -10638,12 +10648,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -10691,24 +10701,24 @@
       }
     },
     "node_modules/react18-json-view": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/react18-json-view/-/react18-json-view-0.2.7.tgz",
-      "integrity": "sha512-u1H0ZrjrYZUuXEyjcMU+/lVbFi890SNacTcYQT+e7/TI7OeczHyLwcngY4JbtZgfhwjIU078O1+NKh97IVVwZw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/react18-json-view/-/react18-json-view-0.2.8.tgz",
+      "integrity": "sha512-uJlcf5PEDaba6yTqfcDAcMSYECZ15SLcpP94mLFTa/+fa1kZANjERqKzS7YxxsrGP4+jDxt6sIaglR0PbQcKPw==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
     },
     "node_modules/reactflow": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.4.tgz",
-      "integrity": "sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==",
+      "version": "11.11.2",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.2.tgz",
+      "integrity": "sha512-o1fT3stSdhzW+SedCGNSmEvZvULZygZIMLyW67NcWNZrgwx1wuJfzLg5fuQ0Nzf389wItumZX/zP3zdaPX7lEw==",
       "dependencies": {
-        "@reactflow/background": "11.3.9",
-        "@reactflow/controls": "11.2.9",
-        "@reactflow/core": "11.10.4",
-        "@reactflow/minimap": "11.7.9",
-        "@reactflow/node-resizer": "2.2.9",
-        "@reactflow/node-toolbar": "1.3.9"
+        "@reactflow/background": "11.3.12",
+        "@reactflow/controls": "11.2.12",
+        "@reactflow/core": "11.11.2",
+        "@reactflow/minimap": "11.7.12",
+        "@reactflow/node-resizer": "2.2.12",
+        "@reactflow/node-toolbar": "1.3.12"
       },
       "peerDependencies": {
         "react": ">=17",
@@ -11086,9 +11096,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.1.tgz",
+      "integrity": "sha512-5GKS5JGfiah1O38Vfa9srZE4s3wdHbwjlCrvIookrg2FO9aIwKLOJXuJQFlEfNcVSOXuaL2hzDeY20uVXcUtrw==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -12086,9 +12096,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
-      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -12122,11 +12132,11 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.10.2.tgz",
-      "integrity": "sha512-HcVuBy7ACaDejIMdwCzAvO22OsiE6ir6ziTIr9kAE0vB+PheVe29ZvRN8p7FXCO2uZHTjEoUs5bPiFpuc/hwwQ==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.14.1.tgz",
+      "integrity": "sha512-mAel3i4BsYhkeVPXeIPXVGPJKeBzqCieZYoFsbWfUzd68JmHByhc1Plit5WlylxXFaGpgkZB8mExlxnt+Q1p7A==",
       "engines": {
-        "node": ">=18.0"
+        "node": ">=18.17"
       }
     },
     "node_modules/unified": {
@@ -13238,9 +13248,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.22.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
-      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.4.tgz",
+      "integrity": "sha512-/AtWOKbBgjzEYYQRNfoGKHObgfAZag6qUJX1VbHo2PRBgS+wfWagEY2mizjfyAPcGesrJOcx/wcl0L9WnVrHFw==",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 49d3fe5ba..9b95e7acc 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -26,6 +26,7 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@types/axios": "^0.14.0",
     "ace-builds": "^1.24.1",
+    "ag-grid-community": "^31.2.1",
     "ag-grid-react": "^31.2.1",
     "ansi-to-html": "^0.7.2",
     "axios": "^1.5.0",
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index d816b55b1..754cc4dda 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -1,14 +1,20 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact } from "ag-grid-react";
+import { ColDef,ColGroupDef } from 'ag-grid-community';
 import { useState } from "react";
 import { Card, CardContent, CardFooter } from "../ui/card";
 
 export default function TableComponent() {
   // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState([
-    { headerName: "Variable Name", field: "name", flex: 1, editable: true }, //This column will be twice as wide as the others
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    { headerName: "Variable Name",
+     field: "name",
+      flex: 1,
+       editable: true 
+      }, //This column will be twice as wide as the others
     {
+      
       field: "type",
       cellEditor: "agSelectCellEditor",
       cellEditorParams: {

From 2474cd348ef3a7dc5ef0dc17f27c52dfb9776e85 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Apr 2024 13:40:54 -0300
Subject: [PATCH 021/142] Refactor CollectionCardComponent to improve code
 readability and fix loadingPlayground state handling

---
 .../src/components/cardComponent/index.tsx    | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 04f009d22..f342960ab 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -20,6 +20,10 @@ import {
 } from "../ui/card";
 import IOModal from "../../modals/IOModal";
 import useFlowStore from "../../stores/flowStore";
+import { set } from "lodash";
+import LoadingComponent from "../loadingComponent";
+import { f } from "million/dist/shared/million.9d4df3c1";
+import Loading from "../ui/loading";
 
 export default function CollectionCardComponent({
   data,
@@ -59,20 +63,21 @@ export default function CollectionCardComponent({
   const setEdges = useFlowStore((state) => state.setEdges);
   const [openPlayground, setOpenPlayground] = useState(false);
   const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+  const [loadingPlayground, setLoadingPlayground] = useState(false);
 
 
   const name = data.is_component ? "Component" : "Flow";
 
-  async function getFlowData(){
+  async function getFlowData() {
     const res = await getComponent(data.id)
-    const newFlow = cloneFLowWithParent(res, res.id, data.is_component,true);
+    const newFlow = cloneFLowWithParent(res, res.id, data.is_component, true);
     return newFlow;
   }
 
   useEffect(() => {
     if (currentFlowId && playground) {
-        setNodes(currentFlow?.data?.nodes ?? [],true);
-        setEdges(currentFlow?.data?.edges ?? [],true);
+      setNodes(currentFlow?.data?.nodes ?? [], true);
+      setEdges(currentFlow?.data?.edges ?? [], true);
       cleanFlowPool();
     }
   }, [currentFlowId]);
@@ -373,6 +378,7 @@ export default function CollectionCardComponent({
             {button && button}
             {playground &&
               <Button
+                disabled={loadingPlayground}
                 key={data.id}
                 tabIndex={-1}
                 variant="outline"
@@ -382,24 +388,32 @@ export default function CollectionCardComponent({
                   "playground-flow-button-" + data.id
                 }
                 onClick={() => {
-                  if(getFlowById(data.id)){
+                  setLoadingPlayground(true);
+                  if (getFlowById(data.id)) {
                     setCurrentFlowId(data.id);
                     setOpenPlayground(true);
+                    setLoadingPlayground(false);
                   }
-                  else{
+                  else {
                     getFlowData().then((res) => {
                       setCurrentFlow(res);
                       setOpenPlayground(true);
+                      setLoadingPlayground(false);
                     });
-                  
+
                   }
                 }}
               >
-                <IconComponent
-                  name="ExternalLink"
-                  className="main-page-nav-button select-none"
-                />
-                Playground
+                {!loadingPlayground ?
+                  <>
+                    <IconComponent
+                      name="ExternalLink"
+                      className="main-page-nav-button select-none"
+                    />
+                    Playground
+                  </>:
+                  <Loading />
+              }
                 {openPlayground && < IOModal cleanOnClose={true} open={openPlayground} setOpen={setOpenPlayground}>
                   <></>
                 </IOModal>}

From c77d458b254cca0fb973dfb33b7bd9e5ef0c3ed7 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 26 Apr 2024 16:41:22 -0300
Subject: [PATCH 022/142] Refactor retrieve_vertices_order function in chat.py
 to use Annotated type hinting for data parameter

---
 src/backend/base/langflow/api/v1/chat.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/base/langflow/api/v1/chat.py b/src/backend/base/langflow/api/v1/chat.py
index 5d8e4ace3..2ec62501a 100644
--- a/src/backend/base/langflow/api/v1/chat.py
+++ b/src/backend/base/langflow/api/v1/chat.py
@@ -54,7 +54,7 @@ async def try_running_celery_task(vertex, user_id):
 @router.post("/build/{flow_id}/vertices", response_model=VerticesOrderResponse)
 async def retrieve_vertices_order(
     flow_id: str,
-    data: Optional[FlowDataRequest] = None,
+    data: Annotated[Optional[FlowDataRequest], Body(embed=True)] = None,
     stop_component_id: Optional[str] = None,
     start_component_id: Optional[str] = None,
     chat_service: "ChatService" = Depends(get_chat_service),

From 4a6b13a7c7608873f1fcf6eaa886f9d205c53098 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Apr 2024 17:23:40 -0300
Subject: [PATCH 023/142] first attempt playground page

---
 src/frontend/package-lock.json              | 633 +++++++++-----------
 src/frontend/src/pages/Playground/index.tsx |  58 ++
 src/frontend/src/routes.tsx                 |   9 +-
 3 files changed, 362 insertions(+), 338 deletions(-)
 create mode 100644 src/frontend/src/pages/Playground/index.tsx

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index e7020b2d6..686da17f1 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -170,25 +170,25 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz",
-      "integrity": "sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
+      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.3.tgz",
-      "integrity": "sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz",
+      "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.1",
+        "@babel/generator": "^7.24.4",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.24.1",
-        "@babel/parser": "^7.24.1",
+        "@babel/helpers": "^7.24.4",
+        "@babel/parser": "^7.24.4",
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
         "@babel/types": "^7.24.0",
@@ -207,9 +207,9 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
-      "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz",
+      "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==",
       "dependencies": {
         "@babel/types": "^7.24.0",
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -342,9 +342,9 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.1.tgz",
-      "integrity": "sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.4.tgz",
+      "integrity": "sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==",
       "dependencies": {
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
@@ -369,9 +369,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
-      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
+      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -380,9 +380,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
-      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -909,9 +909,9 @@
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@headlessui/react": {
-      "version": "1.7.18",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
-      "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==",
+      "version": "1.7.19",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
+      "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==",
       "dependencies": {
         "@tanstack/react-virtual": "^3.0.0-beta.60",
         "client-only": "^0.0.1"
@@ -1006,6 +1006,27 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -2846,11 +2867,11 @@
       }
     },
     "node_modules/@reactflow/background": {
-      "version": "11.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
-      "integrity": "sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==",
+      "version": "11.3.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.12.tgz",
+      "integrity": "sha512-jBuWVb43JQy5h4WOS7G0PU8voGTEJNA+qDmx8/jyBtrjbasTesLNfQvboTGjnQYYiJco6mw5vrtQItAJDNoIqw==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2860,11 +2881,11 @@
       }
     },
     "node_modules/@reactflow/controls": {
-      "version": "11.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.9.tgz",
-      "integrity": "sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==",
+      "version": "11.2.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.12.tgz",
+      "integrity": "sha512-L9F3+avFRShoprdT+5oOijm5gVsz2rqWCXBzOAgD923L1XFGIspdiHLLf8IlPGsT+mfl0GxbptZhaEeEzl1e3g==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2874,9 +2895,9 @@
       }
     },
     "node_modules/@reactflow/core": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.10.4.tgz",
-      "integrity": "sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==",
+      "version": "11.11.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.2.tgz",
+      "integrity": "sha512-+GfgyskweL1PsgRSguUwfrT2eDotlFgaKfDLm7x0brdzzPJY2qbCzVetaxedaiJmIli3817iYbILvE9qLKwbRA==",
       "dependencies": {
         "@types/d3": "^7.4.0",
         "@types/d3-drag": "^3.0.1",
@@ -2894,11 +2915,11 @@
       }
     },
     "node_modules/@reactflow/minimap": {
-      "version": "11.7.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.9.tgz",
-      "integrity": "sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==",
+      "version": "11.7.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.12.tgz",
+      "integrity": "sha512-SRDU77c2PCF54PV/MQfkz7VOW46q7V1LZNOQlXAp7dkNyAOI6R+tb9qBUtUJOvILB+TCN6pRfD9fQ+2T99bW3Q==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "@types/d3-selection": "^3.0.3",
         "@types/d3-zoom": "^3.0.1",
         "classcat": "^5.0.3",
@@ -2912,11 +2933,11 @@
       }
     },
     "node_modules/@reactflow/node-resizer": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.9.tgz",
-      "integrity": "sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==",
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.12.tgz",
+      "integrity": "sha512-6LHJGuI1zHyRrZHw5gGlVLIWnvVxid9WIqw8FMFSg+oF2DuS3pAPwSoZwypy7W22/gDNl9eD1Dcl/OtFtDFQ+w==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.4",
         "d3-drag": "^3.0.0",
         "d3-selection": "^3.0.0",
@@ -2928,11 +2949,11 @@
       }
     },
     "node_modules/@reactflow/node-toolbar": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.9.tgz",
-      "integrity": "sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==",
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.12.tgz",
+      "integrity": "sha512-4kJRvNna/E3y2MZW9/80wTKwkhw4pLJiz3D5eQrD13XcmojSb1rArO9CiwyrI+rMvs5gn6NlCFB4iN1F+Q+lxQ==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2942,9 +2963,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -3260,9 +3281,9 @@
       "dev": true
     },
     "node_modules/@swc/core": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.11.tgz",
-      "integrity": "sha512-WKEakMZxkVwRdgMN4AMJ9K5nysY8g8npgQPczmjBeNK5In7QEAZAJwnyccrWwJZU0XjVeHn2uj+XbOKdDW17rg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-fjADAC5gOOX54Rpcr1lF9DHLD+nPD5H/zXLtEgK2Ez3esmogT+LfHzCZtUxqetjvaMChKhQ0Pp0ZB6Hpz/tCbw==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -3277,16 +3298,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.4.11",
-        "@swc/core-darwin-x64": "1.4.11",
-        "@swc/core-linux-arm-gnueabihf": "1.4.11",
-        "@swc/core-linux-arm64-gnu": "1.4.11",
-        "@swc/core-linux-arm64-musl": "1.4.11",
-        "@swc/core-linux-x64-gnu": "1.4.11",
-        "@swc/core-linux-x64-musl": "1.4.11",
-        "@swc/core-win32-arm64-msvc": "1.4.11",
-        "@swc/core-win32-ia32-msvc": "1.4.11",
-        "@swc/core-win32-x64-msvc": "1.4.11"
+        "@swc/core-darwin-arm64": "1.5.0",
+        "@swc/core-darwin-x64": "1.5.0",
+        "@swc/core-linux-arm-gnueabihf": "1.5.0",
+        "@swc/core-linux-arm64-gnu": "1.5.0",
+        "@swc/core-linux-arm64-musl": "1.5.0",
+        "@swc/core-linux-x64-gnu": "1.5.0",
+        "@swc/core-linux-x64-musl": "1.5.0",
+        "@swc/core-win32-arm64-msvc": "1.5.0",
+        "@swc/core-win32-ia32-msvc": "1.5.0",
+        "@swc/core-win32-x64-msvc": "1.5.0"
       },
       "peerDependencies": {
         "@swc/helpers": "^0.5.0"
@@ -3298,9 +3319,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.11.tgz",
-      "integrity": "sha512-C1j1Qp/IHSelVWdEnT7f0iONWxQz6FAqzjCF2iaL+0vFg4V5f2nlgrueY8vj5pNNzSGhrAlxsMxEIp4dj1MXkg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.5.0.tgz",
+      "integrity": "sha512-dyA25zQjm3xmMFsRPFgBpSqWSW9TITnkndZkZAiPYLjBxH9oTNMa0l09BePsaqEeXySY++tUgAeYu/9onsHLbg==",
       "cpu": [
         "arm64"
       ],
@@ -3314,9 +3335,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.11.tgz",
-      "integrity": "sha512-0TTy3Ni8ncgaMCchSQ7FK8ZXQLlamy0FXmGWbR58c+pVZWYZltYPTmheJUvVcR0H2+gPAymRKyfC0iLszDALjg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.5.0.tgz",
+      "integrity": "sha512-cO7kZMMA/fcQIBT31LBzcVNSk3AZGVYLqvEPnJhFImjPm3mGKUd6kWpARUEGR68MyRU2VsWhE6eCjMcM+G7bxw==",
       "cpu": [
         "x64"
       ],
@@ -3330,9 +3351,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.11.tgz",
-      "integrity": "sha512-XJLB71uw0rog4DjYAPxFGAuGCBQpgJDlPZZK6MTmZOvI/1t0+DelJ24IjHIxk500YYM26Yv47xPabqFPD7I2zQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.5.0.tgz",
+      "integrity": "sha512-BXaXytS4y9lBFRO6vwA6ovvy1d2ZIzS02i2R1oegoZzzNu89CJDpkYXYS9bId0GvK2m9Q9y2ofoZzKE2Rp3PqQ==",
       "cpu": [
         "arm"
       ],
@@ -3346,9 +3367,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.11.tgz",
-      "integrity": "sha512-vYQwzJvm/iu052d5Iw27UFALIN5xSrGkPZXxLNMHPySVko2QMNNBv35HLatkEQHbQ3X+VKSW9J9SkdtAvAVRAQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.5.0.tgz",
+      "integrity": "sha512-Bu4/41pGadXKnRsUbox0ig63xImATVH704oPCXcoOvNGkDyMjWgIAhzIi111vrwFNpj9utabgUE4AtlUa2tAOQ==",
       "cpu": [
         "arm64"
       ],
@@ -3362,9 +3383,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.11.tgz",
-      "integrity": "sha512-eV+KduiRYUFjPsvbZuJ9aknQH9Tj0U2/G9oIZSzLx/18WsYi+upzHbgxmIIHJ2VJgfd7nN40RI/hMtxNsUzR/g==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.5.0.tgz",
+      "integrity": "sha512-lUFFvC8tsepNcTnKEHNrePWanVVef6PQ82Rv9wIeebgGHRUqDh6+CyCqodXez+aKz6NyE/PBIfp0r+jPx4hoJA==",
       "cpu": [
         "arm64"
       ],
@@ -3378,9 +3399,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.11.tgz",
-      "integrity": "sha512-WA1iGXZ2HpqM1OR9VCQZJ8sQ1KP2or9O4bO8vWZo6HZJIeoQSo7aa9waaCLRpkZvkng1ct/TF/l6ymqSNFXIzQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.0.tgz",
+      "integrity": "sha512-c6LegFU1qdyMfk+GzNIOvrX61+mksm21Q01FBnXSy1nf1ACj/a86jmr3zkPl0zpNVHfPOw3Ry1QIuLQKD+67YA==",
       "cpu": [
         "x64"
       ],
@@ -3394,9 +3415,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.11.tgz",
-      "integrity": "sha512-UkVJToKf0owwQYRnGvjHAeYVDfeimCEcx0VQSbJoN7Iy0ckRZi7YPlmWJU31xtKvikE2bQWCOVe0qbSDqqcWXA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.0.tgz",
+      "integrity": "sha512-I/V8aWBmfDWwjtM1bS8ASG+6PcO/pVFYyPP5g2ok46Vz1o1MnAUd18mHnWX43nqVJokaW+BD/G4ZMZ+gXRl4zQ==",
       "cpu": [
         "x64"
       ],
@@ -3410,9 +3431,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.11.tgz",
-      "integrity": "sha512-35khwkyly7lF5NDSyvIrukBMzxPorgc5iTSDfVO/LvnmN5+fm4lTlrDr4tUfTdOhv3Emy7CsKlsNAeFRJ+Pm+w==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.5.0.tgz",
+      "integrity": "sha512-nN685BvI7iM58xabrSOSQHUvIY10pcXh5H9DmS8LeYqG6Dkq7QZ8AwYqqonOitIS5C35MUfhSMLpOTzKoLdUqA==",
       "cpu": [
         "arm64"
       ],
@@ -3426,9 +3447,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.11.tgz",
-      "integrity": "sha512-Wx8/6f0ufgQF2pbVPsJ2dAmFLwIOW+xBE5fxnb7VnEbGkTgP1qMDWiiAtD9rtvDSuODG3i1AEmAak/2HAc6i6A==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.5.0.tgz",
+      "integrity": "sha512-3YjltmEHljI+TvuDOC4lspUzjBUoB3X5BhftRBprSTJx/czuMl0vdoZKs2Snzb5Eqqesp0Rl8q+iQ1E1oJ6dEA==",
       "cpu": [
         "ia32"
       ],
@@ -3442,9 +3463,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.11.tgz",
-      "integrity": "sha512-0xRFW6K9UZQH2NVC/0pVB0GJXS45lY24f+6XaPBF1YnMHd8A8GoHl7ugyM5yNUTe2AKhSgk5fJV00EJt/XBtdQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.5.0.tgz",
+      "integrity": "sha512-ZairtCwJsaxnUH85DcYCyGpNb9bUoIm9QXYW+VaEoXwbcB95dTIiJwN0aRxPT8B0B2MNw/CXLqjoPo6sDwz5iw==",
       "cpu": [
         "x64"
       ],
@@ -3529,9 +3550,9 @@
       }
     },
     "node_modules/@tailwindcss/typography": {
-      "version": "0.5.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.12.tgz",
-      "integrity": "sha512-CNwpBpconcP7ppxmuq3qvaCxiRWnbhANpY/ruH4L5qs2GCiVDJXde/pjj2HWPV1+Q4G9+V/etrwUYopdcjAlyg==",
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
+      "integrity": "sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==",
       "dev": true,
       "dependencies": {
         "lodash.castarray": "^4.4.0",
@@ -3544,11 +3565,11 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
-      "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.4.0.tgz",
+      "integrity": "sha512-GZN4xn/Tg5w7gvYeVcMVCeL4pEyUhvg+Cp6KX2Z01C4FRNxIWMgIQ9ibgMarNQfo+gt0PVLcEER4A9sNv/jlow==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.2.0"
+        "@tanstack/virtual-core": "3.4.0"
       },
       "funding": {
         "type": "github",
@@ -3560,32 +3581,32 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
-      "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.4.0.tgz",
+      "integrity": "sha512-75jXqXxqq5M5Veb9KP1STi8kA5u408uOOAefk2ftHDGCpUk3RP6zX++QqfbmHJTBiU72NQ+ghgCZVts/Wocz8Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "9.3.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
-      "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.0.0.tgz",
+      "integrity": "sha512-PmJPnogldqoVFf+EwbHvbBJ98MmqASV8kLrBYgsDNxQcFMeIS7JFL48sfyXvuMtgmWO/wMhh25odr+8VhDmn4g==",
       "dev": true,
       "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
         "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
+        "aria-query": "5.3.0",
         "chalk": "^4.1.0",
         "dom-accessibility-api": "^0.5.9",
         "lz-string": "^1.5.0",
         "pretty-format": "^27.0.2"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/@testing-library/dom/node_modules/ansi-styles": {
@@ -3805,6 +3826,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/@testing-library/react/node_modules/aria-query": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "dev": true,
+      "dependencies": {
+        "deep-equal": "^2.0.5"
+      }
+    },
     "node_modules/@testing-library/react/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3915,6 +3945,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@ts-morph/common/node_modules/mkdirp": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz",
+      "integrity": "sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -4259,9 +4303,9 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "node_modules/@types/node": {
-      "version": "16.18.93",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.93.tgz",
-      "integrity": "sha512-epWuohp6c0bQt0j3RYCiP9x52axHVn+CjS1Rx1VjPwF+ySg8lrigH3yXGs88XqnA+jGM2qnSMuFTsBxft+hO1Q==",
+      "version": "16.18.96",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.96.tgz",
+      "integrity": "sha512-84iSqGXoO+Ha16j8pRZ/L90vDMKX04QTYMTfYeE1WrjWaZXuchBehGUZEpNgx7JnmlrIHdnABmpjrQjhCnNldQ==",
       "devOptional": true
     },
     "node_modules/@types/prop-types": {
@@ -4270,18 +4314,18 @@
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.73",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz",
-      "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.0.tgz",
+      "integrity": "sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.23",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.23.tgz",
-      "integrity": "sha512-ZQ71wgGOTmDYpnav2knkjr3qXdAFu0vsk8Ci5w3pGAIdj7/kKAyn+VsQDhXsmzzzepAiI9leWMmubXz690AI/A==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "devOptional": true,
       "dependencies": {
         "@types/react": "*"
@@ -4347,9 +4391,9 @@
       "optional": true
     },
     "node_modules/ace-builds": {
-      "version": "1.32.9",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.32.9.tgz",
-      "integrity": "sha512-dqBLPj//Gq0b92YUtRIsdWsORf4J+4xW3r8/4Wr2Vqid7O1j7YBV/ZsVvWBjZFy+EnvMCRFCFOEIM1cbt4BQ/g=="
+      "version": "1.33.1",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.33.1.tgz",
+      "integrity": "sha512-pj5mcXV1n3s86UI4SWUt8X0ltN8cTaYcvF76cSmvy5i2ZDtXX9KkjVcYTGkCV7ox6VUrzqHByeqH0xRsMjXi4g=="
     },
     "node_modules/acorn": {
       "version": "8.11.3",
@@ -4544,12 +4588,12 @@
       }
     },
     "node_modules/aria-query": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "dependencies": {
-        "deep-equal": "^2.0.5"
+        "dequal": "^2.0.3"
       }
     },
     "node_modules/array-buffer-byte-length": {
@@ -4989,9 +5033,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001603",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz",
-      "integrity": "sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==",
+      "version": "1.0.30001612",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
+      "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
       "funding": [
         {
           "type": "opencollective",
@@ -5126,9 +5170,9 @@
       }
     },
     "node_modules/classcat": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
-      "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g=="
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
     },
     "node_modules/cli-cursor": {
       "version": "4.0.0",
@@ -5491,9 +5535,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.9.0.tgz",
-      "integrity": "sha512-9JsDx4E+30kPxThE+6yEwQokqg1957uwTx/skP2RE98fG6Ten6U+S9YXeQg1a3CI958aF5aOb0oEA+KZFfrZUA==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.2.tgz",
+      "integrity": "sha512-eCWS1W/JPyxW9IvlgW5m0R6rp9ZhRsBTW37rvEUthckkjsV04u8XipV519OoccSA46ixhSJa3q7XLI1WUFtRCA==",
       "dev": true,
       "dependencies": {
         "css-selector-tokenizer": "^0.8",
@@ -5813,9 +5857,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.11.tgz",
-      "integrity": "sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg=="
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.1.tgz",
+      "integrity": "sha512-tVP8C/GJwnABOn/7cx/ymx/hXpmBfWIPihC1aOEvS8GbMqy3pgeYtJk1HXN3CO7tu+8bpY18f6isjR5Cymj0TQ=="
     },
     "node_modules/dot-case": {
       "version": "3.0.4",
@@ -5843,14 +5887,14 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.723",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.723.tgz",
-      "integrity": "sha512-rxFVtrMGMFROr4qqU6n95rUi9IlfIm+lIAt+hOToy/9r6CDv0XiEcQdC3VP71y1pE5CFTzKV0RvxOGYCPWWHPw=="
+      "version": "1.4.750",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.750.tgz",
+      "integrity": "sha512-9ItEpeu15hW5m8jKdriL+BQrgwDTXEL9pn4SkillWFu73ZNNNQ2BKKLS+ZHv2vC9UkNhosAeyfxOf/5OSeTCPA=="
     },
     "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
@@ -6805,9 +6849,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.0.24",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.24.tgz",
-      "integrity": "sha512-l2iM8NR53qtcujgAqYvGPJJGModPNWEVUaATRDLfnaLvUoFpImovBm0AHalSSsY8tW6knP8mfJTW4WYGbnAe4w==",
+      "version": "11.1.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.7.tgz",
+      "integrity": "sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -6927,26 +6971,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/gauge/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "optional": true
-    },
-    "node_modules/gauge/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "optional": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -9461,11 +9485,11 @@
       }
     },
     "node_modules/minipass": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=8"
       }
     },
     "node_modules/minizlib": {
@@ -9505,17 +9529,15 @@
       "integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
     },
     "node_modules/mkdirp": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz",
-      "integrity": "sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "optional": true,
       "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
+        "mkdirp": "bin/cmd.js"
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/moment": {
@@ -9707,9 +9729,9 @@
       }
     },
     "node_modules/nwsapi": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ=="
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.9.tgz",
+      "integrity": "sha512-2f3F0SEEer8bBu0dsNCFF50N0cTThV1nWFYcEYFZttdW0lDAoybv9cQoK7X7/68Z89S7FoRrVjP1LPX4XRf9vg=="
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -10073,9 +10095,9 @@
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz",
+      "integrity": "sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==",
       "engines": {
         "node": "14 || >=16.14"
       }
@@ -10704,9 +10726,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/property-information": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.1.tgz",
-      "integrity": "sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -10783,9 +10805,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -10823,15 +10845,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-draggable": {
@@ -10859,9 +10881,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
-      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
       "peerDependencies": {
         "react": "*"
       }
@@ -10915,9 +10937,9 @@
       }
     },
     "node_modules/react-markdown/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
     "node_modules/react-pdf": {
       "version": "7.7.1",
@@ -10957,18 +10979,18 @@
       }
     },
     "node_modules/react-reconciler": {
-      "version": "0.29.0",
-      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz",
-      "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==",
+      "version": "0.29.2",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.2.tgz",
+      "integrity": "sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "engines": {
         "node": ">=0.10.0"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-remove-scroll": {
@@ -11017,11 +11039,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
       "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.16.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -11031,12 +11053,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -11084,24 +11106,24 @@
       }
     },
     "node_modules/react18-json-view": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/react18-json-view/-/react18-json-view-0.2.7.tgz",
-      "integrity": "sha512-u1H0ZrjrYZUuXEyjcMU+/lVbFi890SNacTcYQT+e7/TI7OeczHyLwcngY4JbtZgfhwjIU078O1+NKh97IVVwZw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/react18-json-view/-/react18-json-view-0.2.8.tgz",
+      "integrity": "sha512-uJlcf5PEDaba6yTqfcDAcMSYECZ15SLcpP94mLFTa/+fa1kZANjERqKzS7YxxsrGP4+jDxt6sIaglR0PbQcKPw==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
     },
     "node_modules/reactflow": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.4.tgz",
-      "integrity": "sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==",
+      "version": "11.11.2",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.2.tgz",
+      "integrity": "sha512-o1fT3stSdhzW+SedCGNSmEvZvULZygZIMLyW67NcWNZrgwx1wuJfzLg5fuQ0Nzf389wItumZX/zP3zdaPX7lEw==",
       "dependencies": {
-        "@reactflow/background": "11.3.9",
-        "@reactflow/controls": "11.2.9",
-        "@reactflow/core": "11.10.4",
-        "@reactflow/minimap": "11.7.9",
-        "@reactflow/node-resizer": "2.2.9",
-        "@reactflow/node-toolbar": "1.3.9"
+        "@reactflow/background": "11.3.12",
+        "@reactflow/controls": "11.2.12",
+        "@reactflow/core": "11.11.2",
+        "@reactflow/minimap": "11.7.12",
+        "@reactflow/node-resizer": "2.2.12",
+        "@reactflow/node-toolbar": "1.3.12"
       },
       "peerDependencies": {
         "react": ">=17",
@@ -11479,9 +11501,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -12023,19 +12045,16 @@
       }
     },
     "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=8"
       }
     },
     "node_modules/string-width-cjs": {
@@ -12052,36 +12071,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -12242,6 +12231,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sucrase/node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -12365,27 +12362,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/tar/node_modules/minipass": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/tar/node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "optional": true,
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/tar/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -12589,9 +12565,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
-      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -12625,11 +12601,11 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.10.2.tgz",
-      "integrity": "sha512-HcVuBy7ACaDejIMdwCzAvO22OsiE6ir6ziTIr9kAE0vB+PheVe29ZvRN8p7FXCO2uZHTjEoUs5bPiFpuc/hwwQ==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.14.1.tgz",
+      "integrity": "sha512-mAel3i4BsYhkeVPXeIPXVGPJKeBzqCieZYoFsbWfUzd68JmHByhc1Plit5WlylxXFaGpgkZB8mExlxnt+Q1p7A==",
       "engines": {
-        "node": ">=18.0"
+        "node": ">=18.17"
       }
     },
     "node_modules/unified": {
@@ -13557,26 +13533,6 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
-    "node_modules/wide-align/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "optional": true
-    },
-    "node_modules/wide-align/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "optional": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -13640,24 +13596,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/wrap-ansi/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -13680,6 +13618,27 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/wrap-ansi/node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -13778,9 +13737,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.22.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
-      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.4.tgz",
+      "integrity": "sha512-/AtWOKbBgjzEYYQRNfoGKHObgfAZag6qUJX1VbHo2PRBgS+wfWagEY2mizjfyAPcGesrJOcx/wcl0L9WnVrHFw==",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
new file mode 100644
index 000000000..dd9e588da
--- /dev/null
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { getComponent } from "../../controllers/API";
+import cloneFLowWithParent from "../../utils/storeUtils";
+import LoadingComponent from "../../components/loadingComponent";
+import useFlowStore from "../../stores/flowStore";
+import IOModal from "../../modals/IOModal";
+
+export default function PlaygroundPage() {
+    const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+    const getFlowById = useFlowsManagerStore((state) => state.getFlowById);
+    const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+    const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+    const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+    const setNodes = useFlowStore((state) => state.setNodes);
+    const setEdges = useFlowStore((state) => state.setEdges);
+    const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
+
+    const { id } = useParams();
+    const [loading, setLoading] = useState(true);
+    async function getFlowData() {
+        const res = await getComponent(id!);
+        const newFlow = cloneFLowWithParent(res, res.id, false, true);
+        return newFlow;
+    }
+
+    // Set flow tab id
+    useEffect(() => {
+        if (getFlowById(id!)) {
+            setCurrentFlowId(id!);
+        }
+        else {
+            getFlowData().then((flow) => {
+                setCurrentFlow(flow);
+            });
+        }
+    }, [id]);
+
+    useEffect(() => {
+        if (currentFlow) {
+            setNodes(currentFlow?.data?.nodes ?? [], true);
+            setEdges(currentFlow?.data?.edges ?? [], true);
+            cleanFlowPool();
+            setLoading(false);
+        }
+    }, [currentFlowId]);
+
+
+    return (
+        <div className="w-full h-full flex flex-col align-middle items-center justify-center">
+            {loading ? <div><LoadingComponent remSize={24}></LoadingComponent></div> :
+                <IOModal open={true}setOpen={()=>{}} isPlayground>
+                    <></>
+                </IOModal>}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index b48e5147d..d1a466d36 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -17,6 +17,7 @@ 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 = () => {
   const navigate = useNavigate();
@@ -65,7 +66,13 @@ const Router = () => {
           </ProtectedRoute>
         }
       />
-
+      <Route path="/playground/:id/">
+        element={
+          <Route path="" element={<ProtectedRoute>
+            <PlaygroundPage />
+          </ProtectedRoute>} />
+        }
+      </Route>
       <Route path="/flow/:id/">
         <Route
           path=""

From c5b9419e5231a003e060de1da0d015d4d62ff484 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Apr 2024 17:33:56 -0300
Subject: [PATCH 024/142] Fix useEffect dependency in PlaygroundPage component

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

diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index dd9e588da..d06b1e1ae 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -35,7 +35,7 @@ export default function PlaygroundPage() {
                 setCurrentFlow(flow);
             });
         }
-    }, [id]);
+    }, []);
 
     useEffect(() => {
         if (currentFlow) {

From 84dc98db4b02bb404eed9765ab18c77c49c18dd5 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Apr 2024 17:35:19 -0300
Subject: [PATCH 025/142] Fix useEffect dependency in PlaygroundPage component

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

diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index d06b1e1ae..5a4f1a5c2 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -35,7 +35,7 @@ export default function PlaygroundPage() {
                 setCurrentFlow(flow);
             });
         }
-    }, []);
+    }, [currentFlow]);
 
     useEffect(() => {
         if (currentFlow) {
@@ -44,7 +44,7 @@ export default function PlaygroundPage() {
             cleanFlowPool();
             setLoading(false);
         }
-    }, [currentFlowId]);
+    }, [currentFlow]);
 
 
     return (

From 48ec18b6e5a5810510aaa35c1b74fdb546994180 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Apr 2024 17:43:43 -0300
Subject: [PATCH 026/142] Refactor API index.ts to pass data object as a
 parameter in getVerticesOrder function

---
 src/frontend/src/controllers/API/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index be9572398..c7432f741 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -923,7 +923,7 @@ export async function getVerticesOrder(
     data["nodes"] = nodes
     data["edges"] = Edges
   }
-  return await api.post(`${BASE_URL_API}build/${flowId}/vertices`,data, config);
+  return await api.post(`${BASE_URL_API}build/${flowId}/vertices`,{data}, config);
 }
 
 export async function postBuildVertex(

From 171ebb23219a716cef72750cd1ed2f1b2c24d362 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Apr 2024 17:57:29 -0300
Subject: [PATCH 027/142] fix api call

---
 src/frontend/src/controllers/API/index.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index c7432f741..992b2e04d 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -918,12 +918,14 @@ export async function getVerticesOrder(
   } else if (startNodeId) {
     config["params"] = { start_component_id: startNodeId };
   }
-  const data = {}
-  if(nodes && Edges){
-    data["nodes"] = nodes
-    data["edges"] = Edges
+  const data = {
+    data:{}
   }
-  return await api.post(`${BASE_URL_API}build/${flowId}/vertices`,{data}, config);
+  if(nodes && Edges){
+    data["data"]["nodes"] = nodes
+    data["data"]["edges"] = Edges
+  }
+  return await api.post(`${BASE_URL_API}build/${flowId}/vertices`,data, config);
 }
 
 export async function postBuildVertex(

From 32bfca24d0f72a7e485545884cea8c28242297bd Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 26 Apr 2024 17:59:05 -0300
Subject: [PATCH 028/142] Fix useEffect dependency in PlaygroundPage component

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

diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index 5a4f1a5c2..170690581 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -35,7 +35,7 @@ export default function PlaygroundPage() {
                 setCurrentFlow(flow);
             });
         }
-    }, [currentFlow]);
+    }, [id]);
 
     useEffect(() => {
         if (currentFlow) {

From dfc62752f38fcb006a3384ac7f49345daaef96b5 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Sat, 27 Apr 2024 20:53:29 -0300
Subject: [PATCH 029/142] Add uniqueId function from lodash to
 cloneFLowWithParent in storeUtils.ts

---
 src/frontend/src/utils/storeUtils.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/utils/storeUtils.ts b/src/frontend/src/utils/storeUtils.ts
index 78b7ee7ff..ad4d04529 100644
--- a/src/frontend/src/utils/storeUtils.ts
+++ b/src/frontend/src/utils/storeUtils.ts
@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash";
+import { cloneDeep, uniqueId } from "lodash";
 import { Node } from "reactflow";
 import { FlowType, NodeDataType } from "../types/flow";
 import { isInputNode, isOutputNode } from "./reactflowUtils";
@@ -14,6 +14,9 @@ export default function cloneFLowWithParent(
   if(!keepId){
     childFLow.id = "";
   }
+  else{
+    childFLow.id = uniqueId()+"-"+childFLow.id;
+  }
   childFLow.is_component = is_component;
   return childFLow;
 }

From 04d723d4058cc9dad85ba7329b884242005512c1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 28 Apr 2024 19:42:41 +0200
Subject: [PATCH 030/142] Fixed colors of AG Grid

---
 .../src/components/tableComponent/index.tsx   | 51 +++++++++++++------
 src/frontend/src/style/ag-theme-shadcn.css    | 22 ++++++++
 2 files changed, 57 insertions(+), 16 deletions(-)
 create mode 100644 src/frontend/src/style/ag-theme-shadcn.css

diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 754cc4dda..12688845f 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -1,20 +1,18 @@
+import { ColDef, ColGroupDef } from "ag-grid-community";
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact } from "ag-grid-react";
-import { ColDef,ColGroupDef } from 'ag-grid-community';
 import { useState } from "react";
-import { Card, CardContent, CardFooter } from "../ui/card";
+import { useDarkStore } from "../../stores/darkStore";
+import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
+import { cn } from "../../utils/utils";
+import { Button } from "../ui/button";
 
 export default function TableComponent() {
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Variable Name",
-     field: "name",
-      flex: 1,
-       editable: true 
-      }, //This column will be twice as wide as the others
+    { headerName: "Variable Name", field: "name", flex: 1, editable: true }, //This column will be twice as wide as the others
     {
-      
       field: "type",
       cellEditor: "agSelectCellEditor",
       cellEditorParams: {
@@ -72,20 +70,41 @@ export default function TableComponent() {
     },
   ]);
 
+  const dark = useDarkStore((state) => state.dark);
+
   return (
-    <Card className="mb-12 h-full">
-      <CardContent className="flex h-full flex-col pt-4">
+    <div className="flex h-full flex-col">
         <div
-          className="ag-theme-quartz h-full" // applying the grid theme
+          className={cn(
+            dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
+            "ag-theme-shadcn flex h-full flex-col"
+          )} // applying the grid theme
         >
           <AgGridReact columnDefs={colDefs} rowData={rowData} />
         </div>
-      </CardContent>
-      <CardFooter>
-        <div className="text-xs text-muted-foreground">
+        <div className="flex items-center justify-between w-full">
+        <div className="text-xs text-muted-foreground py-4">
           Showing <strong>1-3</strong> of <strong>3</strong> products
         </div>
-      </CardFooter>
-    </Card>
+        <div className="flex items-center justify-end space-x-2 py-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {}}
+            disabled={true}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {}}
+            disabled={false}
+          >
+            Next
+          </Button>
+        </div>
+        </div>
+    </div>
   );
 }
diff --git a/src/frontend/src/style/ag-theme-shadcn.css b/src/frontend/src/style/ag-theme-shadcn.css
new file mode 100644
index 000000000..dfe61f229
--- /dev/null
+++ b/src/frontend/src/style/ag-theme-shadcn.css
@@ -0,0 +1,22 @@
+/* set the background color of many elements across the grid */
+.ag-theme-quartz {
+  --ag-foreground-color: hsl(222 47% 11%);
+  --ag-background-color: hsl(0 0% 100%);
+  --ag-secondary-foreground-color: hsl(215 16% 46%);
+  --ag-data-color: hsl(222 47% 11%);
+  --ag-header-foreground-color: hsl(222 47% 11%);
+  --ag-header-background-color: hsl(210 40% 98%);
+  --ag-tooltip-background-color: hsl(210 40% 98%);
+  --ag-disabled-foreground-color: hsl(214 32% 91%);
+  
+  /* Add more color variables based on the ShadCN color palette */
+
+  --ag-border-color: hsl(214 32% 91%);
+  --ag-selected-row-background-color: hsl(210 40% 98%);
+  --ag-menu-background-color: hsl(210 40% 98%);
+  --ag-panel-background-color: hsl(210 40% 98%);
+  --ag-row-hover-color: hsl(210 40% 98%);
+  /* Set more color variables as per the ShadCN color scheme */
+
+}
+

From be0bb512547bc06005b1fa1837fd133e0440af52 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 28 Apr 2024 22:50:09 +0200
Subject: [PATCH 031/142] Updated colors on dark mode

---
 src/frontend/src/style/ag-theme-shadcn.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/frontend/src/style/ag-theme-shadcn.css b/src/frontend/src/style/ag-theme-shadcn.css
index dfe61f229..408f1e34e 100644
--- a/src/frontend/src/style/ag-theme-shadcn.css
+++ b/src/frontend/src/style/ag-theme-shadcn.css
@@ -20,3 +20,23 @@
 
 }
 
+.ag-theme-quartz-dark{
+  --ag-foreground-color:  hsl(213 31% 91%);
+  --ag-background-color:  224 35% 7.5%;
+  --ag-secondary-foreground-color: hsl(215 16% 46%);
+  --ag-data-color: hsl(210 20% 80%);
+  --ag-header-foreground-color: hsl(210 20% 80%);
+  --ag-header-background-color: hsl(223 27% 11%);
+  --ag-tooltip-background-color: hsl(223 27% 11%);
+  --ag-disabled-foreground-color: hsl(216 34% 17%);
+  
+  /* Add more color variables based on the ShadCN color palette */
+
+  --ag-border-color: hsl(216 34% 17%);
+  --ag-selected-row-background-color: 222.2 27.4% 1.2%;
+  --ag-menu-background-color: 222.2 27.4% 1.2%;
+  --ag-panel-background-color: 222.2 27.4% 1.2%;
+  --ag-row-hover-color: 222.2 27.4% 1.2%;
+
+}
+

From 358f53d837fb218a28d71e52f475050521f117c8 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 28 Apr 2024 23:00:21 +0200
Subject: [PATCH 032/142] Added pagination

---
 .../src/components/tableComponent/index.tsx   | 27 ++-----------------
 1 file changed, 2 insertions(+), 25 deletions(-)

diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 12688845f..05d1ecd97 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -77,33 +77,10 @@ export default function TableComponent() {
         <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 pb-8"
           )} // applying the grid theme
         >
-          <AgGridReact columnDefs={colDefs} rowData={rowData} />
-        </div>
-        <div className="flex items-center justify-between w-full">
-        <div className="text-xs text-muted-foreground py-4">
-          Showing <strong>1-3</strong> of <strong>3</strong> products
-        </div>
-        <div className="flex items-center justify-end space-x-2 py-4">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {}}
-            disabled={true}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {}}
-            disabled={false}
-          >
-            Next
-          </Button>
-        </div>
+          <AgGridReact pagination={true} columnDefs={colDefs} rowData={rowData} />
         </div>
     </div>
   );

From 3696aef55769b02ff0315fb82c0b52d272fd90d9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 28 Apr 2024 23:11:57 +0200
Subject: [PATCH 033/142] Fixed colors with the variables

---
 src/frontend/src/style/ag-theme-shadcn.css | 54 ++++++----------------
 1 file changed, 14 insertions(+), 40 deletions(-)

diff --git a/src/frontend/src/style/ag-theme-shadcn.css b/src/frontend/src/style/ag-theme-shadcn.css
index 408f1e34e..ca8c2a126 100644
--- a/src/frontend/src/style/ag-theme-shadcn.css
+++ b/src/frontend/src/style/ag-theme-shadcn.css
@@ -1,42 +1,16 @@
 /* set the background color of many elements across the grid */
-.ag-theme-quartz {
-  --ag-foreground-color: hsl(222 47% 11%);
-  --ag-background-color: hsl(0 0% 100%);
-  --ag-secondary-foreground-color: hsl(215 16% 46%);
-  --ag-data-color: hsl(222 47% 11%);
-  --ag-header-foreground-color: hsl(222 47% 11%);
-  --ag-header-background-color: hsl(210 40% 98%);
-  --ag-tooltip-background-color: hsl(210 40% 98%);
-  --ag-disabled-foreground-color: hsl(214 32% 91%);
-  
-  /* Add more color variables based on the ShadCN color palette */
-
-  --ag-border-color: hsl(214 32% 91%);
-  --ag-selected-row-background-color: hsl(210 40% 98%);
-  --ag-menu-background-color: hsl(210 40% 98%);
-  --ag-panel-background-color: hsl(210 40% 98%);
-  --ag-row-hover-color: hsl(210 40% 98%);
-  /* Set more color variables as per the ShadCN color scheme */
-
+.ag-theme-shadcn {
+  --ag-foreground-color: hsl(var(--foreground));
+  --ag-background-color: hsl(var(--background)); 
+  --ag-secondary-foreground-color: hsl(var(--secondary-foreground));
+  --ag-data-color: hsl(var(--foreground));
+  --ag-header-foreground-color: hsl(var(--foreground));
+  --ag-header-background-color: hsl(var(--muted));
+  --ag-tooltip-background-color: hsl(var(--muted));
+  --ag-disabled-foreground-color: hsl(var(--muted-foreground));
+  --ag-border-color: hsl(var(--border));
+  --ag-selected-row-background-color: hsl(var(--accent));
+  --ag-menu-background-color: hsl(var(--accent));
+  --ag-panel-background-color: hsl(var(--accent));
+  --ag-row-hover-color: hsl(var(--accent));
 }
-
-.ag-theme-quartz-dark{
-  --ag-foreground-color:  hsl(213 31% 91%);
-  --ag-background-color:  224 35% 7.5%;
-  --ag-secondary-foreground-color: hsl(215 16% 46%);
-  --ag-data-color: hsl(210 20% 80%);
-  --ag-header-foreground-color: hsl(210 20% 80%);
-  --ag-header-background-color: hsl(223 27% 11%);
-  --ag-tooltip-background-color: hsl(223 27% 11%);
-  --ag-disabled-foreground-color: hsl(216 34% 17%);
-  
-  /* Add more color variables based on the ShadCN color palette */
-
-  --ag-border-color: hsl(216 34% 17%);
-  --ag-selected-row-background-color: 222.2 27.4% 1.2%;
-  --ag-menu-background-color: 222.2 27.4% 1.2%;
-  --ag-panel-background-color: 222.2 27.4% 1.2%;
-  --ag-row-hover-color: 222.2 27.4% 1.2%;
-
-}
-

From 7b79bfeeaf6ca868bde55cd53e95d274cf436494 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 28 Apr 2024 23:33:35 +0200
Subject: [PATCH 034/142] Fixed sizing and colors to fit blocks table

---
 src/frontend/src/style/ag-theme-shadcn.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/style/ag-theme-shadcn.css b/src/frontend/src/style/ag-theme-shadcn.css
index ca8c2a126..f1a124468 100644
--- a/src/frontend/src/style/ag-theme-shadcn.css
+++ b/src/frontend/src/style/ag-theme-shadcn.css
@@ -4,8 +4,8 @@
   --ag-background-color: hsl(var(--background)); 
   --ag-secondary-foreground-color: hsl(var(--secondary-foreground));
   --ag-data-color: hsl(var(--foreground));
-  --ag-header-foreground-color: hsl(var(--foreground));
-  --ag-header-background-color: hsl(var(--muted));
+  --ag-header-foreground-color: hsl(var(--muted-foreground));
+  --ag-header-background-color: hsl(var(--background));
   --ag-tooltip-background-color: hsl(var(--muted));
   --ag-disabled-foreground-color: hsl(var(--muted-foreground));
   --ag-border-color: hsl(var(--border));
@@ -13,4 +13,5 @@
   --ag-menu-background-color: hsl(var(--accent));
   --ag-panel-background-color: hsl(var(--accent));
   --ag-row-hover-color: hsl(var(--accent));
+  --ag-header-height: 2.5rem;
 }

From 366ce591cbd6ee92dc21ab5dae6d57b57b6ca92f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 29 Apr 2024 09:53:56 -0300
Subject: [PATCH 035/142] Add default_fields column to the variable table

---
 .../1f4d6df60295_add_default_fields_column.py | 45 +++++++++++++++++++
 src/backend/base/langflow/api/v1/variable.py  |  4 +-
 .../database/models/variable/model.py         |  7 ++-
 3 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/backend/base/langflow/alembic/versions/1f4d6df60295_add_default_fields_column.py

diff --git a/src/backend/base/langflow/alembic/versions/1f4d6df60295_add_default_fields_column.py b/src/backend/base/langflow/alembic/versions/1f4d6df60295_add_default_fields_column.py
new file mode 100644
index 000000000..7b69058c2
--- /dev/null
+++ b/src/backend/base/langflow/alembic/versions/1f4d6df60295_add_default_fields_column.py
@@ -0,0 +1,45 @@
+"""Add default_fields column
+
+Revision ID: 1f4d6df60295
+Revises: 58b28437a398
+Create Date: 2024-04-29 09:49:46.864145
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy.engine.reflection import Inspector
+
+# revision identifiers, used by Alembic.
+revision: str = "1f4d6df60295"
+down_revision: Union[str, None] = "58b28437a398"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    table_names = inspector.get_table_names()
+    # ### commands auto generated by Alembic - please adjust! ###
+    column_names = [column["name"] for column in inspector.get_columns("variable")]
+    with op.batch_alter_table("variable", schema=None) as batch_op:
+        if "default_fields" not in column_names:
+            batch_op.add_column(sa.Column("default_fields", sa.JSON(), nullable=True))
+
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    table_names = inspector.get_table_names()
+    # ### commands auto generated by Alembic - please adjust! ###
+    column_names = [column["name"] for column in inspector.get_columns("variable")]
+    with op.batch_alter_table("variable", schema=None) as batch_op:
+        if "default_fields" in column_names:
+            batch_op.drop_column("default_fields")
+
+    # ### end Alembic commands ###
diff --git a/src/backend/base/langflow/api/v1/variable.py b/src/backend/base/langflow/api/v1/variable.py
index 123086676..b1cca14c1 100644
--- a/src/backend/base/langflow/api/v1/variable.py
+++ b/src/backend/base/langflow/api/v1/variable.py
@@ -1,4 +1,4 @@
-from datetime import datetime
+from datetime import datetime, timezone
 from uuid import UUID
 
 from fastapi import APIRouter, Depends, HTTPException
@@ -85,7 +85,7 @@ def update_variable(
         variable_data = variable.model_dump(exclude_unset=True)
         for key, value in variable_data.items():
             setattr(db_variable, key, value)
-        db_variable.updated_at = datetime.utcnow()
+        db_variable.updated_at = datetime.now(timezone.utc)
         session.commit()
         session.refresh(db_variable)
         return db_variable
diff --git a/src/backend/base/langflow/services/database/models/variable/model.py b/src/backend/base/langflow/services/database/models/variable/model.py
index 1fab92b4c..cf2236fe1 100644
--- a/src/backend/base/langflow/services/database/models/variable/model.py
+++ b/src/backend/base/langflow/services/database/models/variable/model.py
@@ -1,8 +1,8 @@
 from datetime import datetime, timezone
-from typing import TYPE_CHECKING, Optional
+from typing import TYPE_CHECKING, List, Optional
 from uuid import UUID, uuid4
 
-from sqlmodel import Column, DateTime, Field, Relationship, SQLModel, func
+from sqlmodel import JSON, Column, DateTime, Field, Relationship, SQLModel, func
 
 if TYPE_CHECKING:
     from langflow.services.database.models.user.model import User
@@ -15,6 +15,7 @@ def utc_now():
 class VariableBase(SQLModel):
     name: Optional[str] = Field(None, description="Name of the variable")
     value: Optional[str] = Field(None, description="Encrypted value of the variable")
+    default_fields: Optional[List[str]] = Field(sa_column=Column(JSON))
     type: Optional[str] = Field(None, description="Type of the variable")
 
 
@@ -35,6 +36,7 @@ class Variable(VariableBase, table=True):
         sa_column=Column(DateTime(timezone=True), nullable=True),
         description="Last update time of the variable",
     )
+    default_fields: Optional[List[str]] = Field(sa_column=Column(JSON))
     # foreign key to user table
     user_id: UUID = Field(description="User ID associated with this variable", foreign_key="user.id")
     user: "User" = Relationship(back_populates="variables")
@@ -56,3 +58,4 @@ class VariableUpdate(SQLModel):
     id: UUID  # Include the ID for updating
     name: Optional[str] = Field(None, description="Name of the variable")
     value: Optional[str] = Field(None, description="Encrypted value of the variable")
+    default_fields: Optional[List[str]] = Field(None, description="Default fields for the variable")

From 01ebe97f3ae87e0ad68d539ebd730ce0d42b48e9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 Apr 2024 19:05:18 +0200
Subject: [PATCH 036/142] Fixed footer height

---
 src/frontend/src/style/ag-theme-shadcn.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/frontend/src/style/ag-theme-shadcn.css b/src/frontend/src/style/ag-theme-shadcn.css
index f1a124468..3605d53b3 100644
--- a/src/frontend/src/style/ag-theme-shadcn.css
+++ b/src/frontend/src/style/ag-theme-shadcn.css
@@ -15,3 +15,7 @@
   --ag-row-hover-color: hsl(var(--accent));
   --ag-header-height: 2.5rem;
 }
+
+.ag-theme-shadcn .ag-paging-panel {
+  height: 3rem;
+}

From 51a3d651149982b7247a067fb0f2048499263af7 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 Apr 2024 19:08:14 +0200
Subject: [PATCH 037/142] Fixed editability of variable name

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

diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 05d1ecd97..6ebb12af4 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -11,7 +11,7 @@ import { Button } from "../ui/button";
 export default function TableComponent() {
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Variable Name", field: "name", flex: 1, editable: true }, //This column will be twice as wide as the others
+    { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
     {
       field: "type",
       cellEditor: "agSelectCellEditor",

From f14b8831bfac329d0b18c84be5fd7128731a9cd6 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 Apr 2024 19:18:03 +0200
Subject: [PATCH 038/142] Modified title to be on pair with modals

---
 src/frontend/src/components/tableComponent/index.tsx |  2 +-
 src/frontend/src/pages/GlobalVariablesPage/index.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 6ebb12af4..50cb15521 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -30,7 +30,7 @@ export default function TableComponent() {
       editable: true,
     },
     {
-      headerName: "Default Fields",
+      headerName: "Apply To Fields",
       field: "defaultFields",
       flex: 1,
       editable: true,
diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
index 41e72bcc0..e8bcc0547 100644
--- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
@@ -1,6 +1,7 @@
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 
+import ForwardedIconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 
 export default function GlobalVariablesPage() {
@@ -8,8 +9,11 @@ export default function GlobalVariablesPage() {
     <div className="flex h-full w-full flex-col justify-between gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
         <div className="flex w-full flex-col">
-          <h2 className="text-xl font-bold tracking-tight">Global Variables</h2>
-          <p className="text-muted-foreground">
+          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+            Global Variables
+            <ForwardedIconComponent name="Globe" className="ml-3 w-6 h-6 text-primary"  />
+          </h2>
+          <p className="text-sm text-muted-foreground">
             Manage and assign global variables to default fields. You can add
             new global variables by clicking the button.
           </p>
@@ -17,7 +21,7 @@ export default function GlobalVariablesPage() {
         <div className="flex-shrink-0">
           <Button data-testid="api-key-button-store" variant="primary">
             <IconComponent name="Plus" className="mr-2 w-4" />
-            Add Global Variables
+            Add New
           </Button>
         </div>
       </div>

From 8dac69708fc660452e3c92b26bf29a90ab38076b Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 Apr 2024 14:22:04 -0300
Subject: [PATCH 039/142] Add avaliableFields functionality to
 GlobalVariablesStore

---
 src/frontend/src/stores/globalVariables.ts              | 7 +++++++
 src/frontend/src/stores/typesStore.ts                   | 1 +
 src/frontend/src/types/zustand/globalVariables/index.ts | 3 +++
 3 files changed, 11 insertions(+)

diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index e2f3e37df..6cbb8a641 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -3,6 +3,13 @@ import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
+    avaliableFields: [],
+    setAvaliableFields: (fields) => {
+      set({ avaliableFields: fields });
+    },
+    addAvaliableField: (field) => {
+      set({ avaliableFields: [...get().avaliableFields, field] });
+    },
     globalVariablesEntries: [],
     globalVariables: {},
     setGlobalVariables: (variables) => {
diff --git a/src/frontend/src/stores/typesStore.ts b/src/frontend/src/stores/typesStore.ts
index 142118f44..95223087f 100644
--- a/src/frontend/src/stores/typesStore.ts
+++ b/src/frontend/src/stores/typesStore.ts
@@ -24,6 +24,7 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
             templates: templatesGenerator(data),
           }));
           setLoading(false);
+          console.log(templatesGenerator(data))
           resolve();
         })
         .catch((error) => {
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 3e651179e..fbf7f0675 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -7,4 +7,7 @@ export type GlobalVariablesStore = {
   addGlobalVariable: (name: string, id: string, type?: string) => void;
   removeGlobalVariable: (name: string) => void;
   getVariableId: (name: string) => string | undefined;
+  avaliableFields: Array<string>;
+  setAvaliableFields: (fields: Array<string>) => void;
+  addAvaliableField: (field: string) => void;
 };

From 793a025163571eda48fb9339569a90baf94a708c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 Apr 2024 19:22:44 +0200
Subject: [PATCH 040/142] Fixed title of global pages

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

diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
index e8bcc0547..d02776c44 100644
--- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
@@ -11,7 +11,7 @@ export default function GlobalVariablesPage() {
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Global Variables
-            <ForwardedIconComponent name="Globe" className="ml-3 w-6 h-6 text-primary"  />
+            <ForwardedIconComponent name="Globe" className="ml-2 w-5 h-5 text-primary"  />
           </h2>
           <p className="text-sm text-muted-foreground">
             Manage and assign global variables to default fields. You can add

From 979dae8c49833c7679dfa2ce6bdbc730461f011f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 Apr 2024 15:57:46 -0300
Subject: [PATCH 041/142] Add extractFieldsFromComponenents function to
 reactflowUtils.ts

---
 src/frontend/src/utils/reactflowUtils.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 4cd19bf7e..49aae5b7a 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1234,6 +1234,19 @@ export function templatesGenerator(data: APIObjectType) {
   }, {});
 }
 
+export function extractFieldsFromComponenents(data:APIObjectType ) {
+  const fields = new Set();
+  Object.keys(data).forEach((key) => {
+    Object.keys(data[key]).forEach((kind) => {
+      Object.keys(data[key][kind].template).forEach((field) => {
+        if(data[key][kind].template[field].display_name && data[key][kind].template[field].show)
+        fields.add(data[key][kind].template[field].display_name);
+      });
+    });
+  });
+  return Array.from(fields);
+}
+
 export function downloadFlow(
   flow: FlowType,
   flowName: string,

From df8cbff32f3cf6f74c45374362762cbe3bfa4045 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 29 Apr 2024 23:03:16 +0200
Subject: [PATCH 042/142] Added Add New Variable

---
 .../src/pages/GlobalVariablesPage/index.tsx      | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
index d02776c44..5d3b3a981 100644
--- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
@@ -1,6 +1,7 @@
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 
+import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
 import ForwardedIconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 
@@ -11,7 +12,10 @@ export default function GlobalVariablesPage() {
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
             Global Variables
-            <ForwardedIconComponent name="Globe" className="ml-2 w-5 h-5 text-primary"  />
+            <ForwardedIconComponent
+              name="Globe"
+              className="ml-2 h-5 w-5 text-primary"
+            />
           </h2>
           <p className="text-sm text-muted-foreground">
             Manage and assign global variables to default fields. You can add
@@ -19,10 +23,12 @@ export default function GlobalVariablesPage() {
           </p>
         </div>
         <div className="flex-shrink-0">
-          <Button data-testid="api-key-button-store" variant="primary">
-            <IconComponent name="Plus" className="mr-2 w-4" />
-            Add New
-          </Button>
+          <AddNewVariableButton>
+            <Button data-testid="api-key-button-store" variant="primary">
+              <IconComponent name="Plus" className="mr-2 w-4" />
+              Add New
+            </Button>
+          </AddNewVariableButton>
         </div>
       </div>
 

From b06501a4c93db07d06a459247a7e6f935a34f58a Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 29 Apr 2024 18:07:53 -0300
Subject: [PATCH 043/142] =?UTF-8?q?=E2=9C=A8=20(JsonInput.py):=20add=20a?=
 =?UTF-8?q?=20new=20component=20called=20"JsonInput"=20to=20handle=20JSON?=
 =?UTF-8?q?=20input=20data=20in=20the=20language=20flow=20system=20?=
 =?UTF-8?q?=E2=9C=A8=20(KeyPairInput.py):=20add=20a=20new=20component=20ca?=
 =?UTF-8?q?lled=20"KeyPairInput"=20to=20handle=20dictionary=20input=20data?=
 =?UTF-8?q?=20in=20the=20language=20flow=20system=20=E2=9C=A8=20(CSVOutput?=
 =?UTF-8?q?.py):=20add=20a=20new=20component=20called=20"CSVOutput"=20to?=
 =?UTF-8?q?=20handle=20CSV=20output=20data=20in=20the=20language=20flow=20?=
 =?UTF-8?q?system=20=E2=9C=A8=20(ImageOutput.py):=20add=20a=20new=20compon?=
 =?UTF-8?q?ent=20called=20"ImageOutput"=20to=20handle=20image=20output=20d?=
 =?UTF-8?q?ata=20in=20the=20language=20flow=20system=20=E2=9C=A8=20(JsonOu?=
 =?UTF-8?q?tput.py):=20add=20a=20new=20component=20called=20"JsonOutput"?=
 =?UTF-8?q?=20to=20handle=20JSON=20output=20data=20in=20the=20language=20f?=
 =?UTF-8?q?low=20system=20=E2=9C=A8=20(PDFOutput.py):=20add=20a=20new=20co?=
 =?UTF-8?q?mponent=20called=20"PDFOutput"=20to=20handle=20PDF=20output=20d?=
 =?UTF-8?q?ata=20in=20the=20language=20flow=20system=20=F0=9F=93=9D=20(App?=
 =?UTF-8?q?.css):=20update=20CSS=20to=20improve=20readability=20and=20form?=
 =?UTF-8?q?atting=20=F0=9F=93=9D=20(parameterComponent/index.tsx):=20fix?=
 =?UTF-8?q?=20a=20bug=20where=20rangeSpec=20is=20not=20properly=20accessed?=
 =?UTF-8?q?=20in=20the=20FloatComponent=20=F0=9F=93=9D=20(cardComponent/in?=
 =?UTF-8?q?dex.tsx):=20update=20the=20CollectionCardComponent=20to=20inclu?=
 =?UTF-8?q?de=20a=20new=20button=20for=20opening=20the=20playground=20and?=
 =?UTF-8?q?=20handle=20the=20opening=20and=20closing=20of=20the=20IOModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

📝 (codeTabsComponent/index.tsx): fix conditional rendering of InputListComponent by using optional chaining operator to check if the list property exists in the template object
📝 (keypairListComponent/index.tsx): refactor the initialization of the ref variable to handle both empty and non-empty values correctly
📝 (constants.ts): add "JsonInput" and "JsonOutput" to the INPUT_TYPES and OUTPUT_TYPES constants to support JSON input and output components
📝 (editNodeModal/index.tsx): fix conditional rendering of InputListComponent by using optional chaining operator to check if the list property exists in the template object
📝 (ioFieldView/components/JSONInput/index.tsx): add JSONInput component to handle JSON input in the IOFieldView component
📝 (ioFieldView/components/keyPairInput/index.tsx): add keyPairInput component to handle key-value pair input in the IOFieldView component

✨ (IOFieldView/index.tsx): add useState import to use state hook in functional component
✨ (IOFieldView/index.tsx): add support for KeyPairInput component in IOFieldView
✨ (IOFieldView/index.tsx): add support for JsonInput component in IOFieldView
✨ (IOFieldView/index.tsx): add support for JsonOutput component in IOFieldView
📝 (dictAreaModal/index.tsx): add useDarkStore import to use dark mode state in DictAreaModal component
📝 (classes.css): add CSS classes for json-view component in different themes
📝 (types/components/index.ts): remove duplicate InputGlobalComponentType definition
---
 .../langflow/components/inputs/JsonInput.py   | 17 ++++
 .../components/inputs/KeyPairInput.py         | 19 ++++
 .../langflow/components/outputs/CSVOutput.py  | 17 ++++
 .../components/outputs/ImageOutput.py         | 15 +++
 .../langflow/components/outputs/JsonOutput.py | 17 ++++
 .../langflow/components/outputs/PDFOutput.py  | 16 ++++
 src/frontend/src/App.css                      | 14 ++-
 .../components/parameterComponent/index.tsx   |  2 +-
 .../src/components/cardComponent/index.tsx    | 40 ++++----
 .../components/codeTabsComponent/index.tsx    |  4 +-
 .../components/keypairListComponent/index.tsx |  8 +-
 src/frontend/src/constants/constants.ts       |  8 +-
 .../src/modals/EditNodeModal/index.tsx        |  8 +-
 .../components/JSONInput/index.tsx            | 45 +++++++++
 .../components/keyPairInput/index.tsx         | 91 +++++++++++++++++++
 .../IOModal/components/IOFieldView/index.tsx  | 57 ++++++++++++
 .../src/modals/dictAreaModal/index.tsx        |  6 +-
 src/frontend/src/style/classes.css            | 28 ++++++
 src/frontend/src/types/components/index.ts    | 13 +--
 19 files changed, 386 insertions(+), 39 deletions(-)
 create mode 100644 src/backend/base/langflow/components/inputs/JsonInput.py
 create mode 100644 src/backend/base/langflow/components/inputs/KeyPairInput.py
 create mode 100644 src/backend/base/langflow/components/outputs/CSVOutput.py
 create mode 100644 src/backend/base/langflow/components/outputs/ImageOutput.py
 create mode 100644 src/backend/base/langflow/components/outputs/JsonOutput.py
 create mode 100644 src/backend/base/langflow/components/outputs/PDFOutput.py
 create mode 100644 src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx
 create mode 100644 src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx

diff --git a/src/backend/base/langflow/components/inputs/JsonInput.py b/src/backend/base/langflow/components/inputs/JsonInput.py
new file mode 100644
index 000000000..713868147
--- /dev/null
+++ b/src/backend/base/langflow/components/inputs/JsonInput.py
@@ -0,0 +1,17 @@
+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
new file mode 100644
index 000000000..c48d0a0e1
--- /dev/null
+++ b/src/backend/base/langflow/components/inputs/KeyPairInput.py
@@ -0,0 +1,19 @@
+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/outputs/CSVOutput.py b/src/backend/base/langflow/components/outputs/CSVOutput.py
new file mode 100644
index 000000000..711a6ab96
--- /dev/null
+++ b/src/backend/base/langflow/components/outputs/CSVOutput.py
@@ -0,0 +1,17 @@
+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
new file mode 100644
index 000000000..f50fb7bf7
--- /dev/null
+++ b/src/backend/base/langflow/components/outputs/ImageOutput.py
@@ -0,0 +1,15 @@
+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
new file mode 100644
index 000000000..cbbc10ddc
--- /dev/null
+++ b/src/backend/base/langflow/components/outputs/JsonOutput.py
@@ -0,0 +1,17 @@
+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/PDFOutput.py b/src/backend/base/langflow/components/outputs/PDFOutput.py
new file mode 100644
index 000000000..75e1fabf4
--- /dev/null
+++ b/src/backend/base/langflow/components/outputs/PDFOutput.py
@@ -0,0 +1,16 @@
+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/frontend/src/App.css b/src/frontend/src/App.css
index 6aa681415..22a596730 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -96,6 +96,18 @@ body {
 }
 
 .custom-hover:hover {
-  background-color: rgba(99, 102, 241, 0.1); /* Medium indigo color with 20% opacity */
+  background-color: rgba(
+    99,
+    102,
+    241,
+    0.1
+  ); /* Medium indigo color with 20% opacity */
 }
 
+.json-view-playground .json-view {
+  background-color: #fff !important;
+}
+
+.json-view-flow .json-view {
+  background-color: #bbb !important;
+}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index eef861758..ad00225b8 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -618,7 +618,7 @@ export default function ParameterComponent({
             <FloatComponent
               disabled={disabled}
               value={data.node?.template[name].value ?? ""}
-              rangeSpec={data.node?.template[name].rangeSpec}
+              rangeSpec={data.node?.template[name]?.rangeSpec}
               onChange={handleOnNewValue}
             />
           </div>
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 21701f459..06e87602f 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import IOModal from "../../modals/IOModal";
 import useAlertStore from "../../stores/alertStore";
+import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
@@ -18,8 +20,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
-import IOModal from "../../modals/IOModal";
-import useFlowStore from "../../stores/flowStore";
 
 export default function CollectionCardComponent({
   data,
@@ -27,7 +27,7 @@ export default function CollectionCardComponent({
   disabled = false,
   button,
   onDelete,
-  playground
+  playground,
 }: {
   data: storeComponent;
   authorized?: boolean;
@@ -55,9 +55,9 @@ export default function CollectionCardComponent({
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
   const [openPlayground, setOpenPlayground] = useState(false);
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
-
-
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
 
   const name = data.is_component ? "Component" : "Flow";
 
@@ -86,16 +86,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"]],
             });
           });
@@ -362,15 +364,13 @@ export default function CollectionCardComponent({
               </div>
             )}
             {button && button}
-            {playground &&
+            {playground && (
               <Button
                 tabIndex={-1}
                 variant="outline"
                 size="sm"
                 className="whitespace-nowrap "
-                data-testid={
-                  "playground-flow-button-" + data.id
-                }
+                data-testid={"playground-flow-button-" + data.id}
                 onClick={() => {
                   setCurrentFlowId(data.id);
                   setOpenPlayground(true);
@@ -381,14 +381,16 @@ export default function CollectionCardComponent({
                   className="main-page-nav-button select-none"
                 />
                 Playground
-                {openPlayground && < IOModal open={openPlayground} setOpen={setOpenPlayground}>
-                  <></>
-                </IOModal>}
+                {openPlayground && (
+                  <IOModal open={openPlayground} setOpen={setOpenPlayground}>
+                    <></>
+                  </IOModal>
+                )}
               </Button>
-            }
+            )}
           </div>
         </div>
       </CardFooter>
-    </Card >
+    </Card>
   );
 }
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 78c344714..3666c61a6 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -267,7 +267,7 @@ export default function CodeTabsComponent({
                                               <div className="mx-auto">
                                                 {node.data.node.template[
                                                   templateField
-                                                ].list ? (
+                                                ]?.list ? (
                                                   <InputListComponent
                                                     componentName={
                                                       templateField
@@ -745,7 +745,7 @@ export default function CodeTabsComponent({
                                                   isList={
                                                     node.data.node!.template[
                                                       templateField
-                                                    ].list ?? false
+                                                    ]?.list ?? false
                                                   }
                                                 />
                                               </div>
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index fcd35e01e..2fa12e3b8 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -20,7 +20,13 @@ export default function KeypairListComponent({
     }
   }, [disabled]);
 
-  const ref = useRef(value.length === 0 ? [{ "": "" }] : value);
+  const checkValueType = (value) => {
+    return Array.isArray(value) ? value : [value];
+  };
+
+  const ref = useRef<any>([]);
+  ref.current =
+    !value || value?.length === 0 ? [{ "": "" }] : checkValueType(value);
 
   useEffect(() => {
     if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 49483875c..f8d45da02 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -711,13 +711,19 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
 
 export const priorityFields = new Set(["code", "template"]);
 
-export const INPUT_TYPES = new Set(["ChatInput", "TextInput", "KeyPairInput"]);
+export const INPUT_TYPES = new Set([
+  "ChatInput",
+  "TextInput",
+  "KeyPairInput",
+  "JsonInput",
+]);
 export const OUTPUT_TYPES = new Set([
   "ChatOutput",
   "TextOutput",
   "PDFOutput",
   "ImageOutput",
   "CSVOutput",
+  "JsonOutput",
 ]);
 
 export const CHAT_FIRST_INITIAL_TEXT =
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 17da8c73b..87c72d1df 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -203,7 +203,7 @@ const EditNodeModal = forwardRef(
                                 !myData.node.template[templateParam].options ? (
                                   <div className="mx-auto">
                                     {myData.node.template[templateParam]
-                                      .list ? (
+                                      ?.list ? (
                                       <InputListComponent
                                         componentName={templateParam}
                                         editNode={true}
@@ -345,7 +345,7 @@ const EditNodeModal = forwardRef(
                                       }}
                                       isList={
                                         data.node?.template[templateParam]
-                                          .list ?? false
+                                          ?.list ?? false
                                       }
                                     />
                                   </div>
@@ -420,6 +420,10 @@ const EditNodeModal = forwardRef(
                                     .type === "int" ? (
                                   <div className="mx-auto">
                                     <IntComponent
+                                      rangeSpec={
+                                        data.node?.template[templateParam]
+                                          ?.rangeSpec
+                                      }
                                       id={
                                         "edit-int-input-" +
                                         myData.node.template[templateParam].name
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx
new file mode 100644
index 000000000..25ed5a099
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/JSONInput/index.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+import JsonView from "react18-json-view";
+import { useDarkStore } from "../../../../../../stores/darkStore";
+import { DictComponentType } from "../../../../../../types/components";
+
+export default function IoJsonInput({
+  value = [],
+  onChange,
+  left,
+  output,
+}: DictComponentType): JSX.Element {
+  useEffect(() => {
+    if (value) onChange(value);
+  }, [value]);
+  const isDark = useDarkStore((state) => state.dark);
+
+  const ref = useRef<any>(null);
+  ref.current = value;
+
+  const getClassNames = () => {
+    if (!isDark && !left) return "json-view-playground-white";
+    if (!isDark && left) return "json-view-playground-white-left";
+    if (isDark && left) return "json-view-playground-dark-left";
+    if (isDark && !left) return "json-view-playground-dark";
+  };
+
+  return (
+    <div className="w-full">
+      <JsonView
+        className={getClassNames()}
+        theme="vscode"
+        dark={isDark}
+        editable={!output}
+        enableClipboard
+        onEdit={(edit) => {
+          ref.current = edit["src"];
+        }}
+        onChange={(edit) => {
+          ref.current = edit["src"];
+        }}
+        src={ref.current}
+      />
+    </div>
+  );
+}
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
new file mode 100644
index 000000000..b0b557c55
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
@@ -0,0 +1,91 @@
+import _ from "lodash";
+import { useRef } from "react";
+import IconComponent from "../../../../../../components/genericIconComponent";
+import { Input } from "../../../../../../components/ui/input";
+import { classNames } from "../../../../../../utils/utils";
+
+const IOKeyPairInput = ({ value, onChange, duplicateKey, isList = true }) => {
+  const checkValueType = (value) => {
+    return Array.isArray(value) ? value : [value];
+  };
+
+  const ref = useRef<any>([]);
+  ref.current =
+    !value || value?.length === 0 ? [{ "": "" }] : checkValueType(value);
+
+  const handleChangeKey = (event, idx) => {
+    const oldKey = Object.keys(ref.current[idx])[0];
+    const updatedObj = { [event.target.value]: ref.current[idx][oldKey] };
+    ref.current[idx] = updatedObj;
+    onChange(ref.current);
+  };
+
+  const handleChangeValue = (newValue, idx) => {
+    const key = Object.keys(ref.current[idx])[0];
+    ref.current[idx][key] = newValue;
+    onChange(ref.current);
+  };
+
+  return (
+    <>
+      <div className={classNames("flex h-full flex-col gap-3")}>
+        {ref.current?.map((obj, index) => {
+          return Object.keys(obj).map((key, idx) => {
+            return (
+              <div key={idx} className="flex w-full gap-2">
+                <Input
+                  type="text"
+                  value={key.trim()}
+                  className={classNames(duplicateKey ? "input-invalid" : "")}
+                  placeholder="Type key..."
+                  onChange={(event) => handleChangeKey(event, index)}
+                />
+
+                <Input
+                  type="text"
+                  value={obj[key]}
+                  placeholder="Type a value..."
+                  onChange={(event) =>
+                    handleChangeValue(event.target.value, index)
+                  }
+                />
+
+                {isList && index === ref.current.length - 1 ? (
+                  <button
+                    onClick={() => {
+                      let newInputList = _.cloneDeep(ref.current);
+                      newInputList.push({ "": "" });
+                      onChange(newInputList);
+                    }}
+                  >
+                    <IconComponent
+                      name="Plus"
+                      className={"h-4 w-4 hover:text-accent-foreground"}
+                    />
+                  </button>
+                ) : isList ? (
+                  <button
+                    onClick={() => {
+                      let newInputList = _.cloneDeep(ref.current);
+                      newInputList.splice(index, 1);
+                      onChange(newInputList);
+                    }}
+                  >
+                    <IconComponent
+                      name="X"
+                      className="h-4 w-4 hover:text-status-red"
+                    />
+                  </button>
+                ) : (
+                  ""
+                )}
+              </div>
+            );
+          });
+        })}
+      </div>
+    </>
+  );
+};
+
+export default IOKeyPairInput;
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
index dd02d19ca..468b090fe 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
@@ -1,4 +1,5 @@
 import { cloneDeep } from "lodash";
+import { useState } from "react";
 import ImageViewer from "../../../../components/ImageViewer";
 import CsvOutputComponent from "../../../../components/csvOutputComponent";
 import PdfViewer from "../../../../components/pdfViewer";
@@ -15,7 +16,13 @@ import { PDFViewConstant } from "../../../../constants/constants";
 import { InputOutput } from "../../../../constants/enums";
 import useFlowStore from "../../../../stores/flowStore";
 import { IOFieldViewProps } from "../../../../types/components";
+import {
+  convertValuesToNumbers,
+  hasDuplicateKeys,
+} from "../../../../utils/reactflowUtils";
 import IOFileInput from "./components/FileInput";
+import IoJsonInput from "./components/JSONInput";
+import IOKeyPairInput from "./components/keyPairInput";
 
 export default function IOFieldView({
   type,
@@ -39,6 +46,7 @@ export default function IOFieldView({
       }
     }
   };
+  const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
   function handleOutputType() {
     if (!node) return <>"No node found!"</>;
@@ -78,6 +86,39 @@ export default function IOFieldView({
               />
             );
 
+          case "KeyPairInput":
+            return (
+              <IOKeyPairInput
+                value={node.data.node!.template["input_value"]?.value}
+                onChange={(e) => {
+                  if (node) {
+                    let newNode = cloneDeep(node);
+                    newNode.data.node!.template["input_value"].value = e;
+                    setNode(node.id, newNode);
+                  }
+                  const valueToNumbers = convertValuesToNumbers(e);
+                  setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
+                }}
+                duplicateKey={errorDuplicateKey}
+                isList={node.data.node!.template["input_value"]?.list ?? false}
+              />
+            );
+
+          case "JsonInput":
+            return (
+              <IoJsonInput
+                value={node.data.node!.template["input_value"]?.value}
+                onChange={(e) => {
+                  if (node) {
+                    let newNode = cloneDeep(node);
+                    newNode.data.node!.template["input_value"].value = e;
+                    setNode(node.id, newNode);
+                  }
+                }}
+                left={left}
+              />
+            );
+
           default:
             return (
               <Textarea
@@ -169,6 +210,22 @@ export default function IOFieldView({
               />
             );
 
+          case "JsonOutput":
+            return (
+              <IoJsonInput
+                value={node.data.node!.template["input_value"]?.value}
+                onChange={(e) => {
+                  if (node) {
+                    let newNode = cloneDeep(node);
+                    newNode.data.node!.template["input_value"].value = e;
+                    setNode(node.id, newNode);
+                  }
+                }}
+                left={left}
+                output
+              />
+            );
+
           default:
             return (
               <Textarea
diff --git a/src/frontend/src/modals/dictAreaModal/index.tsx b/src/frontend/src/modals/dictAreaModal/index.tsx
index 8a59344fe..032e282aa 100644
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/src/frontend/src/modals/dictAreaModal/index.tsx
@@ -11,6 +11,7 @@ import "react18-json-view/src/style.css";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { CODE_DICT_DIALOG_SUBTITLE } from "../../constants/constants";
+import { useDarkStore } from "../../stores/darkStore";
 import BaseModal from "../baseModal";
 
 export default function DictAreaModal({
@@ -19,7 +20,7 @@ export default function DictAreaModal({
   value,
 }): JSX.Element {
   const [open, setOpen] = useState(false);
-
+  const isDark = useDarkStore((state) => state.dark);
   const ref = useRef(value);
 
   useEffect(() => {
@@ -41,7 +42,8 @@ export default function DictAreaModal({
         <div className="flex h-full w-full flex-col transition-all ">
           <JsonView
             theme="vscode"
-            dark={true}
+            dark={isDark}
+            className={!isDark ? "json-view-white" : "json-view-dark"}
             editable
             enableClipboard
             onEdit={(edit) => {
diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css
index 1e274135d..39b080390 100644
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@@ -68,3 +68,31 @@ select:-webkit-autofill:focus {
   background-color: #bbb;
   border-radius: 999px;
 }
+
+.json-view-playground-white-left {
+  background-color: #fff !important;
+  height: fit-content !important;
+}
+
+.json-view-playground-dark {
+  background-color: #141924 !important;
+  height: fit-content !important;
+}
+
+.json-view-playground-white {
+  background-color: #f8fafc !important;
+  height: fit-content !important;
+}
+
+.json-view-playground-dark-left {
+  background-color: #0c101a !important;
+  height: fit-content !important;
+}
+
+.json-view-white {
+  background-color: #f8fafc !important;
+}
+
+.json-view-dark {
+  background-color: #141924 !important;
+}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 4fb2ca1b7..5e01a723b 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -80,15 +80,6 @@ export type InputGlobalComponentType = {
   editNode?: boolean;
 };
 
-export type InputGlobalComponentType = {
-  disabled: boolean;
-  onChange: (value: string) => void;
-  setDb: (value: boolean) => void;
-  name: string;
-  data: NodeDataType;
-  editNode?: boolean;
-};
-
 export type KeyPairListComponentType = {
   value: any;
   onChange: (value: Object[]) => void;
@@ -102,9 +93,11 @@ export type KeyPairListComponentType = {
 export type DictComponentType = {
   value: any;
   onChange: (value) => void;
-  disabled: boolean;
+  disabled?: boolean;
   editNode?: boolean;
   id?: string;
+  left?: boolean;
+  output?: boolean;
 };
 
 export type TextAreaComponentType = {

From de57b0955f7c9b65a7dc0bdb1342e551827a292d Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 29 Apr 2024 19:00:18 -0300
Subject: [PATCH 044/142] Feat: Create Shortcuts page on settings

---
 src/frontend/package-lock.json                | 412 +++++++++---------
 src/frontend/package.json                     |   1 +
 .../components/shortcutsComponent/index.tsx   | 104 +++++
 .../src/components/tableComponent/index.tsx   |  10 +-
 .../components/shortcutsPage/index.tsx        |  25 ++
 src/frontend/src/routes.tsx                   |   3 +-
 6 files changed, 351 insertions(+), 204 deletions(-)
 create mode 100644 src/frontend/src/components/shortcutsComponent/index.tsx
 create mode 100644 src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 6bd58b234..5e6b7fe67 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -31,6 +31,7 @@
         "@tailwindcss/line-clamp": "^0.4.4",
         "@types/axios": "^0.14.0",
         "ace-builds": "^1.24.1",
+        "ag-grid-community": "^31.2.1",
         "ag-grid-react": "^31.2.1",
         "ansi-to-html": "^0.7.2",
         "axios": "^1.5.0",
@@ -167,25 +168,25 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz",
-      "integrity": "sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
+      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.3.tgz",
-      "integrity": "sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz",
+      "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.1",
+        "@babel/generator": "^7.24.4",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.24.1",
-        "@babel/parser": "^7.24.1",
+        "@babel/helpers": "^7.24.4",
+        "@babel/parser": "^7.24.4",
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
         "@babel/types": "^7.24.0",
@@ -204,9 +205,9 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
-      "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz",
+      "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==",
       "dependencies": {
         "@babel/types": "^7.24.0",
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -339,9 +340,9 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.1.tgz",
-      "integrity": "sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.4.tgz",
+      "integrity": "sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==",
       "dependencies": {
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
@@ -366,9 +367,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
-      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
+      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -377,9 +378,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
-      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -906,9 +907,9 @@
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@headlessui/react": {
-      "version": "1.7.18",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
-      "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==",
+      "version": "1.7.19",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
+      "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==",
       "dependencies": {
         "@tanstack/react-virtual": "^3.0.0-beta.60",
         "client-only": "^0.0.1"
@@ -2790,11 +2791,11 @@
       }
     },
     "node_modules/@reactflow/background": {
-      "version": "11.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
-      "integrity": "sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==",
+      "version": "11.3.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.12.tgz",
+      "integrity": "sha512-jBuWVb43JQy5h4WOS7G0PU8voGTEJNA+qDmx8/jyBtrjbasTesLNfQvboTGjnQYYiJco6mw5vrtQItAJDNoIqw==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2804,11 +2805,11 @@
       }
     },
     "node_modules/@reactflow/controls": {
-      "version": "11.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.9.tgz",
-      "integrity": "sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==",
+      "version": "11.2.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.12.tgz",
+      "integrity": "sha512-L9F3+avFRShoprdT+5oOijm5gVsz2rqWCXBzOAgD923L1XFGIspdiHLLf8IlPGsT+mfl0GxbptZhaEeEzl1e3g==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2818,9 +2819,9 @@
       }
     },
     "node_modules/@reactflow/core": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.10.4.tgz",
-      "integrity": "sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==",
+      "version": "11.11.2",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.2.tgz",
+      "integrity": "sha512-+GfgyskweL1PsgRSguUwfrT2eDotlFgaKfDLm7x0brdzzPJY2qbCzVetaxedaiJmIli3817iYbILvE9qLKwbRA==",
       "dependencies": {
         "@types/d3": "^7.4.0",
         "@types/d3-drag": "^3.0.1",
@@ -2838,11 +2839,11 @@
       }
     },
     "node_modules/@reactflow/minimap": {
-      "version": "11.7.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.9.tgz",
-      "integrity": "sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==",
+      "version": "11.7.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.12.tgz",
+      "integrity": "sha512-SRDU77c2PCF54PV/MQfkz7VOW46q7V1LZNOQlXAp7dkNyAOI6R+tb9qBUtUJOvILB+TCN6pRfD9fQ+2T99bW3Q==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "@types/d3-selection": "^3.0.3",
         "@types/d3-zoom": "^3.0.1",
         "classcat": "^5.0.3",
@@ -2856,11 +2857,11 @@
       }
     },
     "node_modules/@reactflow/node-resizer": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.9.tgz",
-      "integrity": "sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==",
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.12.tgz",
+      "integrity": "sha512-6LHJGuI1zHyRrZHw5gGlVLIWnvVxid9WIqw8FMFSg+oF2DuS3pAPwSoZwypy7W22/gDNl9eD1Dcl/OtFtDFQ+w==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.4",
         "d3-drag": "^3.0.0",
         "d3-selection": "^3.0.0",
@@ -2872,11 +2873,11 @@
       }
     },
     "node_modules/@reactflow/node-toolbar": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.9.tgz",
-      "integrity": "sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==",
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.12.tgz",
+      "integrity": "sha512-4kJRvNna/E3y2MZW9/80wTKwkhw4pLJiz3D5eQrD13XcmojSb1rArO9CiwyrI+rMvs5gn6NlCFB4iN1F+Q+lxQ==",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.2",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2886,9 +2887,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -3204,9 +3205,9 @@
       "dev": true
     },
     "node_modules/@swc/core": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.11.tgz",
-      "integrity": "sha512-WKEakMZxkVwRdgMN4AMJ9K5nysY8g8npgQPczmjBeNK5In7QEAZAJwnyccrWwJZU0XjVeHn2uj+XbOKdDW17rg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-fjADAC5gOOX54Rpcr1lF9DHLD+nPD5H/zXLtEgK2Ez3esmogT+LfHzCZtUxqetjvaMChKhQ0Pp0ZB6Hpz/tCbw==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -3221,16 +3222,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.4.11",
-        "@swc/core-darwin-x64": "1.4.11",
-        "@swc/core-linux-arm-gnueabihf": "1.4.11",
-        "@swc/core-linux-arm64-gnu": "1.4.11",
-        "@swc/core-linux-arm64-musl": "1.4.11",
-        "@swc/core-linux-x64-gnu": "1.4.11",
-        "@swc/core-linux-x64-musl": "1.4.11",
-        "@swc/core-win32-arm64-msvc": "1.4.11",
-        "@swc/core-win32-ia32-msvc": "1.4.11",
-        "@swc/core-win32-x64-msvc": "1.4.11"
+        "@swc/core-darwin-arm64": "1.5.0",
+        "@swc/core-darwin-x64": "1.5.0",
+        "@swc/core-linux-arm-gnueabihf": "1.5.0",
+        "@swc/core-linux-arm64-gnu": "1.5.0",
+        "@swc/core-linux-arm64-musl": "1.5.0",
+        "@swc/core-linux-x64-gnu": "1.5.0",
+        "@swc/core-linux-x64-musl": "1.5.0",
+        "@swc/core-win32-arm64-msvc": "1.5.0",
+        "@swc/core-win32-ia32-msvc": "1.5.0",
+        "@swc/core-win32-x64-msvc": "1.5.0"
       },
       "peerDependencies": {
         "@swc/helpers": "^0.5.0"
@@ -3242,9 +3243,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.11.tgz",
-      "integrity": "sha512-C1j1Qp/IHSelVWdEnT7f0iONWxQz6FAqzjCF2iaL+0vFg4V5f2nlgrueY8vj5pNNzSGhrAlxsMxEIp4dj1MXkg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.5.0.tgz",
+      "integrity": "sha512-dyA25zQjm3xmMFsRPFgBpSqWSW9TITnkndZkZAiPYLjBxH9oTNMa0l09BePsaqEeXySY++tUgAeYu/9onsHLbg==",
       "cpu": [
         "arm64"
       ],
@@ -3258,9 +3259,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.11.tgz",
-      "integrity": "sha512-0TTy3Ni8ncgaMCchSQ7FK8ZXQLlamy0FXmGWbR58c+pVZWYZltYPTmheJUvVcR0H2+gPAymRKyfC0iLszDALjg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.5.0.tgz",
+      "integrity": "sha512-cO7kZMMA/fcQIBT31LBzcVNSk3AZGVYLqvEPnJhFImjPm3mGKUd6kWpARUEGR68MyRU2VsWhE6eCjMcM+G7bxw==",
       "cpu": [
         "x64"
       ],
@@ -3274,9 +3275,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.11.tgz",
-      "integrity": "sha512-XJLB71uw0rog4DjYAPxFGAuGCBQpgJDlPZZK6MTmZOvI/1t0+DelJ24IjHIxk500YYM26Yv47xPabqFPD7I2zQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.5.0.tgz",
+      "integrity": "sha512-BXaXytS4y9lBFRO6vwA6ovvy1d2ZIzS02i2R1oegoZzzNu89CJDpkYXYS9bId0GvK2m9Q9y2ofoZzKE2Rp3PqQ==",
       "cpu": [
         "arm"
       ],
@@ -3290,9 +3291,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.11.tgz",
-      "integrity": "sha512-vYQwzJvm/iu052d5Iw27UFALIN5xSrGkPZXxLNMHPySVko2QMNNBv35HLatkEQHbQ3X+VKSW9J9SkdtAvAVRAQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.5.0.tgz",
+      "integrity": "sha512-Bu4/41pGadXKnRsUbox0ig63xImATVH704oPCXcoOvNGkDyMjWgIAhzIi111vrwFNpj9utabgUE4AtlUa2tAOQ==",
       "cpu": [
         "arm64"
       ],
@@ -3306,9 +3307,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.11.tgz",
-      "integrity": "sha512-eV+KduiRYUFjPsvbZuJ9aknQH9Tj0U2/G9oIZSzLx/18WsYi+upzHbgxmIIHJ2VJgfd7nN40RI/hMtxNsUzR/g==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.5.0.tgz",
+      "integrity": "sha512-lUFFvC8tsepNcTnKEHNrePWanVVef6PQ82Rv9wIeebgGHRUqDh6+CyCqodXez+aKz6NyE/PBIfp0r+jPx4hoJA==",
       "cpu": [
         "arm64"
       ],
@@ -3322,9 +3323,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.11.tgz",
-      "integrity": "sha512-WA1iGXZ2HpqM1OR9VCQZJ8sQ1KP2or9O4bO8vWZo6HZJIeoQSo7aa9waaCLRpkZvkng1ct/TF/l6ymqSNFXIzQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.0.tgz",
+      "integrity": "sha512-c6LegFU1qdyMfk+GzNIOvrX61+mksm21Q01FBnXSy1nf1ACj/a86jmr3zkPl0zpNVHfPOw3Ry1QIuLQKD+67YA==",
       "cpu": [
         "x64"
       ],
@@ -3338,9 +3339,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.11.tgz",
-      "integrity": "sha512-UkVJToKf0owwQYRnGvjHAeYVDfeimCEcx0VQSbJoN7Iy0ckRZi7YPlmWJU31xtKvikE2bQWCOVe0qbSDqqcWXA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.0.tgz",
+      "integrity": "sha512-I/V8aWBmfDWwjtM1bS8ASG+6PcO/pVFYyPP5g2ok46Vz1o1MnAUd18mHnWX43nqVJokaW+BD/G4ZMZ+gXRl4zQ==",
       "cpu": [
         "x64"
       ],
@@ -3354,9 +3355,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.11.tgz",
-      "integrity": "sha512-35khwkyly7lF5NDSyvIrukBMzxPorgc5iTSDfVO/LvnmN5+fm4lTlrDr4tUfTdOhv3Emy7CsKlsNAeFRJ+Pm+w==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.5.0.tgz",
+      "integrity": "sha512-nN685BvI7iM58xabrSOSQHUvIY10pcXh5H9DmS8LeYqG6Dkq7QZ8AwYqqonOitIS5C35MUfhSMLpOTzKoLdUqA==",
       "cpu": [
         "arm64"
       ],
@@ -3370,9 +3371,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.11.tgz",
-      "integrity": "sha512-Wx8/6f0ufgQF2pbVPsJ2dAmFLwIOW+xBE5fxnb7VnEbGkTgP1qMDWiiAtD9rtvDSuODG3i1AEmAak/2HAc6i6A==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.5.0.tgz",
+      "integrity": "sha512-3YjltmEHljI+TvuDOC4lspUzjBUoB3X5BhftRBprSTJx/czuMl0vdoZKs2Snzb5Eqqesp0Rl8q+iQ1E1oJ6dEA==",
       "cpu": [
         "ia32"
       ],
@@ -3386,9 +3387,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.4.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.11.tgz",
-      "integrity": "sha512-0xRFW6K9UZQH2NVC/0pVB0GJXS45lY24f+6XaPBF1YnMHd8A8GoHl7ugyM5yNUTe2AKhSgk5fJV00EJt/XBtdQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.5.0.tgz",
+      "integrity": "sha512-ZairtCwJsaxnUH85DcYCyGpNb9bUoIm9QXYW+VaEoXwbcB95dTIiJwN0aRxPT8B0B2MNw/CXLqjoPo6sDwz5iw==",
       "cpu": [
         "x64"
       ],
@@ -3488,11 +3489,11 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
-      "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.4.0.tgz",
+      "integrity": "sha512-GZN4xn/Tg5w7gvYeVcMVCeL4pEyUhvg+Cp6KX2Z01C4FRNxIWMgIQ9ibgMarNQfo+gt0PVLcEER4A9sNv/jlow==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.2.0"
+        "@tanstack/virtual-core": "3.4.0"
       },
       "funding": {
         "type": "github",
@@ -3504,32 +3505,32 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
-      "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.4.0.tgz",
+      "integrity": "sha512-75jXqXxqq5M5Veb9KP1STi8kA5u408uOOAefk2ftHDGCpUk3RP6zX++QqfbmHJTBiU72NQ+ghgCZVts/Wocz8Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "9.3.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
-      "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.0.0.tgz",
+      "integrity": "sha512-PmJPnogldqoVFf+EwbHvbBJ98MmqASV8kLrBYgsDNxQcFMeIS7JFL48sfyXvuMtgmWO/wMhh25odr+8VhDmn4g==",
       "dev": true,
       "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
         "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
+        "aria-query": "5.3.0",
         "chalk": "^4.1.0",
         "dom-accessibility-api": "^0.5.9",
         "lz-string": "^1.5.0",
         "pretty-format": "^27.0.2"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
     "node_modules/@testing-library/dom/node_modules/ansi-styles": {
@@ -3749,6 +3750,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/@testing-library/react/node_modules/aria-query": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "dev": true,
+      "dependencies": {
+        "deep-equal": "^2.0.5"
+      }
+    },
     "node_modules/@testing-library/react/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4203,9 +4213,9 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "node_modules/@types/node": {
-      "version": "16.18.93",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.93.tgz",
-      "integrity": "sha512-epWuohp6c0bQt0j3RYCiP9x52axHVn+CjS1Rx1VjPwF+ySg8lrigH3yXGs88XqnA+jGM2qnSMuFTsBxft+hO1Q==",
+      "version": "16.18.96",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.96.tgz",
+      "integrity": "sha512-84iSqGXoO+Ha16j8pRZ/L90vDMKX04QTYMTfYeE1WrjWaZXuchBehGUZEpNgx7JnmlrIHdnABmpjrQjhCnNldQ==",
       "devOptional": true
     },
     "node_modules/@types/prop-types": {
@@ -4214,18 +4224,18 @@
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.73",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz",
-      "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.0.tgz",
+      "integrity": "sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.23",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.23.tgz",
-      "integrity": "sha512-ZQ71wgGOTmDYpnav2knkjr3qXdAFu0vsk8Ci5w3pGAIdj7/kKAyn+VsQDhXsmzzzepAiI9leWMmubXz690AI/A==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "devOptional": true,
       "dependencies": {
         "@types/react": "*"
@@ -4285,9 +4295,9 @@
       "deprecated": "Use your platform's native atob() and btoa() methods instead"
     },
     "node_modules/ace-builds": {
-      "version": "1.32.9",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.32.9.tgz",
-      "integrity": "sha512-dqBLPj//Gq0b92YUtRIsdWsORf4J+4xW3r8/4Wr2Vqid7O1j7YBV/ZsVvWBjZFy+EnvMCRFCFOEIM1cbt4BQ/g=="
+      "version": "1.33.1",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.33.1.tgz",
+      "integrity": "sha512-pj5mcXV1n3s86UI4SWUt8X0ltN8cTaYcvF76cSmvy5i2ZDtXX9KkjVcYTGkCV7ox6VUrzqHByeqH0xRsMjXi4g=="
     },
     "node_modules/acorn": {
       "version": "8.11.3",
@@ -4463,12 +4473,12 @@
       }
     },
     "node_modules/aria-query": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
-      "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "dependencies": {
-        "deep-equal": "^2.0.5"
+        "dequal": "^2.0.3"
       }
     },
     "node_modules/array-buffer-byte-length": {
@@ -4908,9 +4918,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001603",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz",
-      "integrity": "sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==",
+      "version": "1.0.30001612",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
+      "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
       "funding": [
         {
           "type": "opencollective",
@@ -5021,9 +5031,9 @@
       }
     },
     "node_modules/classcat": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
-      "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g=="
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
     },
     "node_modules/cli-cursor": {
       "version": "4.0.0",
@@ -5371,9 +5381,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.9.0.tgz",
-      "integrity": "sha512-9JsDx4E+30kPxThE+6yEwQokqg1957uwTx/skP2RE98fG6Ten6U+S9YXeQg1a3CI958aF5aOb0oEA+KZFfrZUA==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.2.tgz",
+      "integrity": "sha512-eCWS1W/JPyxW9IvlgW5m0R6rp9ZhRsBTW37rvEUthckkjsV04u8XipV519OoccSA46ixhSJa3q7XLI1WUFtRCA==",
       "dev": true,
       "dependencies": {
         "css-selector-tokenizer": "^0.8",
@@ -5678,9 +5688,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.11.tgz",
-      "integrity": "sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.0.tgz",
+      "integrity": "sha512-yoU4rhgPKCo+p5UrWWWNKiIq+ToGqmVVhk0PmMYBK4kRsR3/qhemNFL8f6CFmBd4gMwm3F4T7HBoydP5uY07fA=="
     },
     "node_modules/dot-case": {
       "version": "3.0.4",
@@ -5708,9 +5718,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.723",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.723.tgz",
-      "integrity": "sha512-rxFVtrMGMFROr4qqU6n95rUi9IlfIm+lIAt+hOToy/9r6CDv0XiEcQdC3VP71y1pE5CFTzKV0RvxOGYCPWWHPw=="
+      "version": "1.4.749",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.749.tgz",
+      "integrity": "sha512-LRMMrM9ITOvue0PoBrvNIraVmuDbJV5QC9ierz/z5VilMdPOVMjOtpICNld3PuXuTZ3CHH/UPxX9gHhAPwi+0Q=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -6665,9 +6675,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.0.24",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.24.tgz",
-      "integrity": "sha512-l2iM8NR53qtcujgAqYvGPJJGModPNWEVUaATRDLfnaLvUoFpImovBm0AHalSSsY8tW6knP8mfJTW4WYGbnAe4w==",
+      "version": "11.1.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.7.tgz",
+      "integrity": "sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -9380,9 +9390,9 @@
       }
     },
     "node_modules/nwsapi": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
-      "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ=="
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.9.tgz",
+      "integrity": "sha512-2f3F0SEEer8bBu0dsNCFF50N0cTThV1nWFYcEYFZttdW0lDAoybv9cQoK7X7/68Z89S7FoRrVjP1LPX4XRf9vg=="
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -9738,9 +9748,9 @@
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz",
+      "integrity": "sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==",
       "engines": {
         "node": "14 || >=16.14"
       }
@@ -10348,9 +10358,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/property-information": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.1.tgz",
-      "integrity": "sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -10427,9 +10437,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.0.tgz",
+      "integrity": "sha512-RPutkJftSAldDibyrjuku7q11d3oy6wKOyPe5K1HA/HwwrXcEqBdHsLypkC2FFYjP7bPUa6gbzSBhw4sY2JcDg==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -10467,15 +10477,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-zaKdLBftQJnvb7FtDIpZtsAIb2MZU087RM8bRDZU8LVCCFYjPTsDZJNFUWPcVz3HFSN1n/caxi0ca4B/aaVQGQ==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.1"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.0"
       }
     },
     "node_modules/react-draggable": {
@@ -10503,9 +10513,9 @@
       }
     },
     "node_modules/react-icons": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
-      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
       "peerDependencies": {
         "react": "*"
       }
@@ -10559,23 +10569,23 @@
       }
     },
     "node_modules/react-markdown/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.0.tgz",
+      "integrity": "sha512-wRiUsea88TjKDc4FBEn+sLvIDesp6brMbGWnJGjew2waAc9evdhja/2LvePc898HJbHw0L+MTWy7NhpnELAvLQ=="
     },
     "node_modules/react-reconciler": {
-      "version": "0.29.0",
-      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz",
-      "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==",
+      "version": "0.29.1",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.1.tgz",
+      "integrity": "sha512-xyrmljHU7F5cn1jngF+qPlbSZwstjSOW2BYwkv2LTIv37/BOCJ1XW7Z4iyMxofRJexBueKkhmlX8G2Y01hQx9w==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.1"
       },
       "engines": {
         "node": ">=0.10.0"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.0"
       }
     },
     "node_modules/react-remove-scroll": {
@@ -10624,11 +10634,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
       "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.16.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -10638,12 +10648,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -10691,24 +10701,24 @@
       }
     },
     "node_modules/react18-json-view": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/react18-json-view/-/react18-json-view-0.2.7.tgz",
-      "integrity": "sha512-u1H0ZrjrYZUuXEyjcMU+/lVbFi890SNacTcYQT+e7/TI7OeczHyLwcngY4JbtZgfhwjIU078O1+NKh97IVVwZw==",
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/react18-json-view/-/react18-json-view-0.2.8.tgz",
+      "integrity": "sha512-uJlcf5PEDaba6yTqfcDAcMSYECZ15SLcpP94mLFTa/+fa1kZANjERqKzS7YxxsrGP4+jDxt6sIaglR0PbQcKPw==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
     },
     "node_modules/reactflow": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.4.tgz",
-      "integrity": "sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==",
+      "version": "11.11.2",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.2.tgz",
+      "integrity": "sha512-o1fT3stSdhzW+SedCGNSmEvZvULZygZIMLyW67NcWNZrgwx1wuJfzLg5fuQ0Nzf389wItumZX/zP3zdaPX7lEw==",
       "dependencies": {
-        "@reactflow/background": "11.3.9",
-        "@reactflow/controls": "11.2.9",
-        "@reactflow/core": "11.10.4",
-        "@reactflow/minimap": "11.7.9",
-        "@reactflow/node-resizer": "2.2.9",
-        "@reactflow/node-toolbar": "1.3.9"
+        "@reactflow/background": "11.3.12",
+        "@reactflow/controls": "11.2.12",
+        "@reactflow/core": "11.11.2",
+        "@reactflow/minimap": "11.7.12",
+        "@reactflow/node-resizer": "2.2.12",
+        "@reactflow/node-toolbar": "1.3.12"
       },
       "peerDependencies": {
         "react": ">=17",
@@ -11086,9 +11096,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.1.tgz",
+      "integrity": "sha512-5GKS5JGfiah1O38Vfa9srZE4s3wdHbwjlCrvIookrg2FO9aIwKLOJXuJQFlEfNcVSOXuaL2hzDeY20uVXcUtrw==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -12086,9 +12096,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
-      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -12122,11 +12132,11 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.10.2.tgz",
-      "integrity": "sha512-HcVuBy7ACaDejIMdwCzAvO22OsiE6ir6ziTIr9kAE0vB+PheVe29ZvRN8p7FXCO2uZHTjEoUs5bPiFpuc/hwwQ==",
+      "version": "6.14.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.14.1.tgz",
+      "integrity": "sha512-mAel3i4BsYhkeVPXeIPXVGPJKeBzqCieZYoFsbWfUzd68JmHByhc1Plit5WlylxXFaGpgkZB8mExlxnt+Q1p7A==",
       "engines": {
-        "node": ">=18.0"
+        "node": ">=18.17"
       }
     },
     "node_modules/unified": {
@@ -13238,9 +13248,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.22.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
-      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.4.tgz",
+      "integrity": "sha512-/AtWOKbBgjzEYYQRNfoGKHObgfAZag6qUJX1VbHo2PRBgS+wfWagEY2mizjfyAPcGesrJOcx/wcl0L9WnVrHFw==",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 49d3fe5ba..9b95e7acc 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -26,6 +26,7 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@types/axios": "^0.14.0",
     "ace-builds": "^1.24.1",
+    "ag-grid-community": "^31.2.1",
     "ag-grid-react": "^31.2.1",
     "ansi-to-html": "^0.7.2",
     "axios": "^1.5.0",
diff --git a/src/frontend/src/components/shortcutsComponent/index.tsx b/src/frontend/src/components/shortcutsComponent/index.tsx
new file mode 100644
index 000000000..574bacd12
--- /dev/null
+++ b/src/frontend/src/components/shortcutsComponent/index.tsx
@@ -0,0 +1,104 @@
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
+import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
+import { AgGridReact } from "ag-grid-react";
+import { ColDef,ColGroupDef } from 'ag-grid-community';
+import { useState } from "react";
+import { Card, CardContent, CardFooter } from "../ui/card";
+
+export default function ShortcutsComponent() {
+  const advancedShortcut = "Ctrl + shift + A";
+  const minizmizeShortcut = "Ctrl + shift + Q";
+  const codeShortcut = "Ctrl + shift + C";
+  const copyShortcut = "Ctrl + C";
+  const duplicateShortcut = "Ctrl + D";
+  const shareShortcut = "Ctrl + shift + S";
+  const docsShortcut = "Ctrl + shift + D";
+  const saveShortcut = "Ctrl + S";
+  const deleteShortcut = "Backspace";
+  const interactionShortcut = "Ctrl + K";
+  const undoShortcut = "Ctrl + Z";
+  const redoShortcut = "Ctrl + Y";
+
+
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    { headerName: "Functionality",
+     field: "name",
+      flex: 1,
+       editable: false 
+      }, //This column will be twice as wide as the others
+    {
+      field: "shortcut",
+      flex: 2,
+      editable: false,
+    }
+  ]);
+
+  const [rowData, setRowData] = useState([
+    {
+      name: "Open node advanced settings",
+      shortcut: advancedShortcut,
+    },
+    {
+      name: "Minimize",
+      shortcut: minizmizeShortcut
+    },
+    {
+      name: "Open Code modal",
+      shortcut: codeShortcut,
+    },
+    {
+      name: "Copy",
+      shortcut: copyShortcut,
+    },
+    {
+      name: "Duplicate",
+      shortcut: duplicateShortcut,
+    },
+    {
+      name: "Share",
+      shortcut: shareShortcut,
+    },
+    {
+      name: "Open docs",
+      shortcut: docsShortcut,
+    },
+    {
+      name: "Save",
+      shortcut: saveShortcut,
+    },
+    {
+      name: "Delete",
+      shortcut: deleteShortcut,
+    },
+    {
+      name: "Open interaction panel",
+      shortcut: interactionShortcut,
+    },
+    {
+      name: "Undo",
+      shortcut: undoShortcut,
+    },
+    {
+      name: "Redo",
+      shortcut: redoShortcut,
+    },
+  ]);
+
+  return (
+    <Card className="mb-12 h-full">
+      <CardContent className="flex h-full flex-col pt-4">
+        <div
+          className="ag-theme-quartz h-full" // applying the grid theme
+        >
+          <AgGridReact columnDefs={colDefs} rowData={rowData} />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <div className="text-xs text-muted-foreground">
+          Showing <strong>1-3</strong> of <strong>3</strong> products
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index d816b55b1..754cc4dda 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -1,14 +1,20 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact } from "ag-grid-react";
+import { ColDef,ColGroupDef } from 'ag-grid-community';
 import { useState } from "react";
 import { Card, CardContent, CardFooter } from "../ui/card";
 
 export default function TableComponent() {
   // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState([
-    { headerName: "Variable Name", field: "name", flex: 1, editable: true }, //This column will be twice as wide as the others
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    { headerName: "Variable Name",
+     field: "name",
+      flex: 1,
+       editable: true 
+      }, //This column will be twice as wide as the others
     {
+      
       field: "type",
       cellEditor: "agSelectCellEditor",
       cellEditorParams: {
diff --git a/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx b/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx
new file mode 100644
index 000000000..b73efd829
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx
@@ -0,0 +1,25 @@
+
+
+
+import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import ShortcutsComponent from "../../../../components/shortcutsComponent";
+import { Button } from "../../../../components/ui/button";
+
+export default function ShortcutsPage() {
+  return (
+    <div className="flex h-full w-full flex-col justify-between gap-6">
+      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+        <div className="flex w-full flex-col">
+          <h2 className="text-xl font-bold tracking-tight">Shortcuts</h2>
+          <p className="text-muted-foreground">
+            Manage and assign global shortcuts
+          </p>
+        </div>
+      </div>
+
+      <div className="flex h-full w-full flex-col justify-between">
+        <ShortcutsComponent />
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 943a953b0..dcacb3ac0 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -19,6 +19,7 @@ import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
+import ShortcutsPage from "./pages/FlowPage/components/shortcutsPage";
 
 const Router = () => {
   const navigate = useNavigate();
@@ -57,7 +58,7 @@ const Router = () => {
       >
         <Route index element={<Navigate replace to={"global-variables"} />} />
         <Route path="global-variables" element={<GlobalVariablesPage />} />
-        <Route path="shortcuts" element={<GlobalVariablesPage />} />
+        <Route path="shortcuts" element={<ShortcutsPage />} />
       </Route>
       <Route
         path="/store"

From ac46b2b6c9b1acff32d4959c1cd92c9f0787b752 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:10:33 +0200
Subject: [PATCH 045/142] Passed Table props to page

---
 src/frontend/package-lock.json                |  4 +-
 src/frontend/package.json                     |  4 +-
 .../src/components/tableComponent/index.tsx   | 92 ++++---------------
 .../src/pages/GlobalVariablesPage/index.tsx   | 65 ++++++++++++-
 4 files changed, 84 insertions(+), 81 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 5e6b7fe67..e7c71d62b 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -48,10 +48,10 @@
         "million": "^3.0.6",
         "moment": "^2.29.4",
         "playwright": "^1.42.0",
-        "react": "^18.2.0",
+        "react": "^18.2.21",
         "react-ace": "^10.1.0",
         "react-cookie": "^4.1.1",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.2.21",
         "react-error-boundary": "^4.0.11",
         "react-icons": "^5.0.1",
         "react-laag": "^2.0.5",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 9b95e7acc..26dc911af 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -43,10 +43,10 @@
     "million": "^3.0.6",
     "moment": "^2.29.4",
     "playwright": "^1.42.0",
-    "react": "^18.2.0",
+    "react": "^18.2.21",
     "react-ace": "^10.1.0",
     "react-cookie": "^4.1.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.2.21",
     "react-error-boundary": "^4.0.11",
     "react-icons": "^5.0.1",
     "react-laag": "^2.0.5",
diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 43a9106b1..20b9083d9 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -1,89 +1,29 @@
-import { ColDef, ColGroupDef } from "ag-grid-community";
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact } from "ag-grid-react";
-import { ColDef,ColGroupDef } from 'ag-grid-community';
-import { useState } from "react";
+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 { Button } from "../ui/button";
-
-export default function TableComponent() {
-  // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
-    {
-      
-      field: "type",
-      cellEditor: "agSelectCellEditor",
-      cellEditorParams: {
-        values: ["Prompt", "Credential"],
-        valueListGap: 10,
-      },
-      flex: 1,
-      editable: true,
-    },
-    {
-      field: "value",
-      cellEditor: "agLargeTextCellEditor",
-      cellEditorPopup: true,
-      flex: 2,
-      editable: true,
-    },
-    {
-      headerName: "Apply To Fields",
-      field: "defaultFields",
-      flex: 1,
-      editable: true,
-    },
-  ]);
-
-  const [rowData, setRowData] = useState([
-    {
-      name: "OpenAI Key",
-      type: "Credential",
-      value: "apijpioj09u302j0982ejf",
-      defaultFields: "Open AI API Key",
-    },
-    {
-      name: "Prompt",
-      type: "Prompt",
-      value: `Answer user's questions based on the document below:
-
-    ---
-    
-    {Document}
-    
-    ---
-    
-    Question:
-    {Question}
-    
-    Answer:
-    `,
-      defaultFields: ["Prompt"],
-    },
-    {
-      name: "Azure Key",
-      type: "Credential",
-      value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
-      defaultFields: ["Azure API Key"],
-    },
-  ]);
 
+const TableComponent = forwardRef<
+  ElementRef<typeof AgGridReact>,
+  ComponentPropsWithoutRef<typeof AgGridReact>
+>(({ ...props }, ref) => {
   const dark = useDarkStore((state) => state.dark);
 
   return (
     <div className="flex h-full flex-col">
-        <div
-          className={cn(
-            dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-            "ag-theme-shadcn flex h-full flex-col pb-8"
-          )} // applying the grid theme
-        >
-          <AgGridReact pagination={true} columnDefs={colDefs} rowData={rowData} />
-        </div>
+      <div
+        className={cn(
+          dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
+          "ag-theme-shadcn flex h-full flex-col pb-8"
+        )} // applying the grid theme
+      >
+        <AgGridReact ref={ref} pagination={true} {...props} />
+      </div>
     </div>
   );
-}
+});
+
+export default TableComponent;
diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
index 5d3b3a981..ed4092413 100644
--- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/GlobalVariablesPage/index.tsx
@@ -4,8 +4,71 @@ import { Button } from "../../components/ui/button";
 import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
 import ForwardedIconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
+import { useState } from "react";
+import { ColDef, ColGroupDef } from "ag-grid-community";
 
 export default function GlobalVariablesPage() {
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
+    {
+      field: "type",
+      cellEditor: "agSelectCellEditor",
+      cellEditorParams: {
+        values: ["Prompt", "Credential"],
+        valueListGap: 10,
+      },
+      flex: 1,
+      editable: true,
+    },
+    {
+      field: "value",
+      cellEditor: "agLargeTextCellEditor",
+      cellEditorPopup: true,
+      flex: 2,
+      editable: true,
+    },
+    {
+      headerName: "Apply To Fields",
+      field: "defaultFields",
+      flex: 1,
+      editable: true,
+    },
+  ]);
+
+  const [rowData, setRowData] = useState([
+    {
+      name: "OpenAI Key",
+      type: "Credential",
+      value: "apijpioj09u302j0982ejf",
+      defaultFields: "Open AI API Key",
+    },
+    {
+      name: "Prompt",
+      type: "Prompt",
+      value: `Answer user's questions based on the document below:
+
+    ---
+    
+    {Document}
+    
+    ---
+    
+    Question:
+    {Question}
+    
+    Answer:
+    `,
+      defaultFields: ["Prompt"],
+    },
+    {
+      name: "Azure Key",
+      type: "Credential",
+      value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
+      defaultFields: ["Azure API Key"],
+    },
+  ]);
+
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@@ -33,7 +96,7 @@ export default function GlobalVariablesPage() {
       </div>
 
       <div className="flex h-full w-full flex-col justify-between">
-        <TableComponent />
+        <TableComponent columnDefs={colDefs} rowData={rowData} />
       </div>
     </div>
   );

From 2864fd1cc073a38754234948e6535980397b11fa Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:16:59 +0200
Subject: [PATCH 046/142] Added shortcuts page

---
 .../src/pages/ShortcutsPage/index.tsx         | 40 +++++++++++++++++++
 src/frontend/src/routes.tsx                   |  2 +-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/pages/ShortcutsPage/index.tsx

diff --git a/src/frontend/src/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/ShortcutsPage/index.tsx
new file mode 100644
index 000000000..3c91269d9
--- /dev/null
+++ b/src/frontend/src/pages/ShortcutsPage/index.tsx
@@ -0,0 +1,40 @@
+import IconComponent from "../../components/genericIconComponent";
+import { Button } from "../../components/ui/button";
+
+import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import TableComponent from "../../components/tableComponent";
+
+export default function ShortcutsPage() {
+  return (
+    <div className="flex h-full w-full flex-col justify-between gap-6">
+      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+        <div className="flex w-full flex-col">
+          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+            Shortcuts
+            <ForwardedIconComponent
+              name="Keyboard"
+              className="ml-2 h-5 w-5 text-primary"
+            />
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Customize, manage and create shortcuts for quick access to
+            frequently used actions.
+          </p>
+        </div>
+        <div className="flex-shrink-0">
+          <AddNewVariableButton>
+            <Button data-testid="api-key-button-store" variant="primary">
+              <IconComponent name="Plus" className="mr-2 w-4" />
+              Add New
+            </Button>
+          </AddNewVariableButton>
+        </div>
+      </div>
+
+      <div className="flex h-full w-full flex-col justify-between">
+        <TableComponent />
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index dcacb3ac0..2bd0af624 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -19,7 +19,7 @@ import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
-import ShortcutsPage from "./pages/FlowPage/components/shortcutsPage";
+import ShortcutsPage from "./pages/ShortcutsPage";
 
 const Router = () => {
   const navigate = useNavigate();

From d503b74a3f2368d884fa4982153723241143feba Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:18:24 +0200
Subject: [PATCH 047/142] Added shortcuts into right page

---
 .../components/shortcutsComponent/index.tsx   | 104 ------------------
 .../components/shortcutsPage/index.tsx        |  25 -----
 .../src/pages/ShortcutsPage/index.tsx         |  89 ++++++++++++---
 3 files changed, 76 insertions(+), 142 deletions(-)
 delete mode 100644 src/frontend/src/components/shortcutsComponent/index.tsx
 delete mode 100644 src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx

diff --git a/src/frontend/src/components/shortcutsComponent/index.tsx b/src/frontend/src/components/shortcutsComponent/index.tsx
deleted file mode 100644
index 574bacd12..000000000
--- a/src/frontend/src/components/shortcutsComponent/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
-import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
-import { AgGridReact } from "ag-grid-react";
-import { ColDef,ColGroupDef } from 'ag-grid-community';
-import { useState } from "react";
-import { Card, CardContent, CardFooter } from "../ui/card";
-
-export default function ShortcutsComponent() {
-  const advancedShortcut = "Ctrl + shift + A";
-  const minizmizeShortcut = "Ctrl + shift + Q";
-  const codeShortcut = "Ctrl + shift + C";
-  const copyShortcut = "Ctrl + C";
-  const duplicateShortcut = "Ctrl + D";
-  const shareShortcut = "Ctrl + shift + S";
-  const docsShortcut = "Ctrl + shift + D";
-  const saveShortcut = "Ctrl + S";
-  const deleteShortcut = "Backspace";
-  const interactionShortcut = "Ctrl + K";
-  const undoShortcut = "Ctrl + Z";
-  const redoShortcut = "Ctrl + Y";
-
-
-  // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Functionality",
-     field: "name",
-      flex: 1,
-       editable: false 
-      }, //This column will be twice as wide as the others
-    {
-      field: "shortcut",
-      flex: 2,
-      editable: false,
-    }
-  ]);
-
-  const [rowData, setRowData] = useState([
-    {
-      name: "Open node advanced settings",
-      shortcut: advancedShortcut,
-    },
-    {
-      name: "Minimize",
-      shortcut: minizmizeShortcut
-    },
-    {
-      name: "Open Code modal",
-      shortcut: codeShortcut,
-    },
-    {
-      name: "Copy",
-      shortcut: copyShortcut,
-    },
-    {
-      name: "Duplicate",
-      shortcut: duplicateShortcut,
-    },
-    {
-      name: "Share",
-      shortcut: shareShortcut,
-    },
-    {
-      name: "Open docs",
-      shortcut: docsShortcut,
-    },
-    {
-      name: "Save",
-      shortcut: saveShortcut,
-    },
-    {
-      name: "Delete",
-      shortcut: deleteShortcut,
-    },
-    {
-      name: "Open interaction panel",
-      shortcut: interactionShortcut,
-    },
-    {
-      name: "Undo",
-      shortcut: undoShortcut,
-    },
-    {
-      name: "Redo",
-      shortcut: redoShortcut,
-    },
-  ]);
-
-  return (
-    <Card className="mb-12 h-full">
-      <CardContent className="flex h-full flex-col pt-4">
-        <div
-          className="ag-theme-quartz h-full" // applying the grid theme
-        >
-          <AgGridReact columnDefs={colDefs} rowData={rowData} />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <div className="text-xs text-muted-foreground">
-          Showing <strong>1-3</strong> of <strong>3</strong> products
-        </div>
-      </CardFooter>
-    </Card>
-  );
-}
diff --git a/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx b/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx
deleted file mode 100644
index b73efd829..000000000
--- a/src/frontend/src/pages/FlowPage/components/shortcutsPage/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-import ForwardedIconComponent from "../../../../components/genericIconComponent";
-import ShortcutsComponent from "../../../../components/shortcutsComponent";
-import { Button } from "../../../../components/ui/button";
-
-export default function ShortcutsPage() {
-  return (
-    <div className="flex h-full w-full flex-col justify-between gap-6">
-      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
-        <div className="flex w-full flex-col">
-          <h2 className="text-xl font-bold tracking-tight">Shortcuts</h2>
-          <p className="text-muted-foreground">
-            Manage and assign global shortcuts
-          </p>
-        </div>
-      </div>
-
-      <div className="flex h-full w-full flex-col justify-between">
-        <ShortcutsComponent />
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/src/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/ShortcutsPage/index.tsx
index 3c91269d9..860f5da2c 100644
--- a/src/frontend/src/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/ShortcutsPage/index.tsx
@@ -1,11 +1,82 @@
-import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
-
-import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
+import { ColDef, ColGroupDef } from "ag-grid-community";
+import { useState } from "react";
 import ForwardedIconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 
 export default function ShortcutsPage() {
+  const advancedShortcut = "Ctrl + shift + A";
+  const minizmizeShortcut = "Ctrl + shift + Q";
+  const codeShortcut = "Ctrl + shift + C";
+  const copyShortcut = "Ctrl + C";
+  const duplicateShortcut = "Ctrl + D";
+  const shareShortcut = "Ctrl + shift + S";
+  const docsShortcut = "Ctrl + shift + D";
+  const saveShortcut = "Ctrl + S";
+  const deleteShortcut = "Backspace";
+  const interactionShortcut = "Ctrl + K";
+  const undoShortcut = "Ctrl + Z";
+  const redoShortcut = "Ctrl + Y";
+
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    { headerName: "Functionality", field: "name", flex: 1, editable: false }, //This column will be twice as wide as the others
+    {
+      field: "shortcut",
+      flex: 2,
+      editable: false,
+    },
+  ]);
+
+  const [rowData, setRowData] = useState([
+    {
+      name: "Open node advanced settings",
+      shortcut: advancedShortcut,
+    },
+    {
+      name: "Minimize",
+      shortcut: minizmizeShortcut,
+    },
+    {
+      name: "Open Code modal",
+      shortcut: codeShortcut,
+    },
+    {
+      name: "Copy",
+      shortcut: copyShortcut,
+    },
+    {
+      name: "Duplicate",
+      shortcut: duplicateShortcut,
+    },
+    {
+      name: "Share",
+      shortcut: shareShortcut,
+    },
+    {
+      name: "Open docs",
+      shortcut: docsShortcut,
+    },
+    {
+      name: "Save",
+      shortcut: saveShortcut,
+    },
+    {
+      name: "Delete",
+      shortcut: deleteShortcut,
+    },
+    {
+      name: "Open interaction panel",
+      shortcut: interactionShortcut,
+    },
+    {
+      name: "Undo",
+      shortcut: undoShortcut,
+    },
+    {
+      name: "Redo",
+      shortcut: redoShortcut,
+    },
+  ]);
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@@ -22,18 +93,10 @@ export default function ShortcutsPage() {
             frequently used actions.
           </p>
         </div>
-        <div className="flex-shrink-0">
-          <AddNewVariableButton>
-            <Button data-testid="api-key-button-store" variant="primary">
-              <IconComponent name="Plus" className="mr-2 w-4" />
-              Add New
-            </Button>
-          </AddNewVariableButton>
-        </div>
       </div>
 
       <div className="flex h-full w-full flex-col justify-between">
-        <TableComponent />
+        <TableComponent columnDefs={colDefs} rowData={rowData} />
       </div>
     </div>
   );

From 610fd94cf8047e2b945923ec51a38cc496c1c696 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:26:17 +0200
Subject: [PATCH 048/142] Changed position of page

---
 .../pages}/GlobalVariablesPage/index.tsx               | 10 +++++-----
 .../{ => SettingsPage/pages}/ShortcutsPage/index.tsx   |  4 ++--
 src/frontend/src/routes.tsx                            |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename src/frontend/src/pages/{ => SettingsPage/pages}/GlobalVariablesPage/index.tsx (87%)
 rename src/frontend/src/pages/{ => SettingsPage/pages}/ShortcutsPage/index.tsx (94%)

diff --git a/src/frontend/src/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
similarity index 87%
rename from src/frontend/src/pages/GlobalVariablesPage/index.tsx
rename to src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index ed4092413..791cde349 100644
--- a/src/frontend/src/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -1,9 +1,9 @@
-import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
+import IconComponent from "../../../../components/genericIconComponent";
+import { Button } from "../../../../components/ui/button";
 
-import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
-import ForwardedIconComponent from "../../components/genericIconComponent";
-import TableComponent from "../../components/tableComponent";
+import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
+import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import TableComponent from "../../../../components/tableComponent";
 import { useState } from "react";
 import { ColDef, ColGroupDef } from "ag-grid-community";
 
diff --git a/src/frontend/src/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
similarity index 94%
rename from src/frontend/src/pages/ShortcutsPage/index.tsx
rename to src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index 860f5da2c..09ac72d06 100644
--- a/src/frontend/src/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -1,7 +1,7 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useState } from "react";
-import ForwardedIconComponent from "../../components/genericIconComponent";
-import TableComponent from "../../components/tableComponent";
+import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import TableComponent from "../../../../components/tableComponent";
 
 export default function ShortcutsPage() {
   const advancedShortcut = "Ctrl + shift + A";
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 2bd0af624..f8a13a92c 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -9,7 +9,7 @@ import AdminPage from "./pages/AdminPage";
 import LoginAdminPage from "./pages/AdminPage/LoginPage";
 import ApiKeysPage from "./pages/ApiKeysPage";
 import FlowPage from "./pages/FlowPage";
-import GlobalVariablesPage from "./pages/GlobalVariablesPage";
+import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";
 import HomePage from "./pages/MainPage";
 import ComponentsComponent from "./pages/MainPage/components/components";
 import ProfileSettingsPage from "./pages/ProfileSettingsPage";
@@ -19,7 +19,7 @@ import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
-import ShortcutsPage from "./pages/ShortcutsPage";
+import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage";
 
 const Router = () => {
   const navigate = useNavigate();

From 20b2aa04b6207a865d30ac4f10c0a45fcf91f07f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:27:28 +0200
Subject: [PATCH 049/142] Hidden unused settings

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

diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index 48941fd06..86d47cd34 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -25,7 +25,7 @@ export default function SettingsPage(): JSX.Element {
           />
         ),
       },
-      {
+      /* {
         title: "Theme",
         href: "/settings/theme",
         icon: (
@@ -54,7 +54,7 @@ export default function SettingsPage(): JSX.Element {
             className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
           />
         ),
-      },
+      }, */
     {
       title: "Global Variables",
       href: "/settings/global-variables",

From 6ebeacc11510035dc36630cde48f89935f9033d2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:35:08 +0200
Subject: [PATCH 050/142] Added sample General page

---
 .../SettingsPage/pages/GeneralPage/index.tsx  | 145 ++++++++++++++++++
 src/frontend/src/routes.tsx                   |   8 +-
 2 files changed, 150 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
new file mode 100644
index 000000000..ceeb99697
--- /dev/null
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -0,0 +1,145 @@
+import { Button } from "../../../../components/ui/button";
+
+import { ColDef, ColGroupDef } from "ag-grid-community";
+import { useState } from "react";
+import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../../../components/ui/card";
+import { Checkbox } from "../../../../components/ui/checkbox";
+import { Input } from "../../../../components/ui/input";
+
+export default function GeneralPage() {
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
+    {
+      field: "type",
+      cellEditor: "agSelectCellEditor",
+      cellEditorParams: {
+        values: ["Prompt", "Credential"],
+        valueListGap: 10,
+      },
+      flex: 1,
+      editable: true,
+    },
+    {
+      field: "value",
+      cellEditor: "agLargeTextCellEditor",
+      cellEditorPopup: true,
+      flex: 2,
+      editable: true,
+    },
+    {
+      headerName: "Apply To Fields",
+      field: "defaultFields",
+      flex: 1,
+      editable: true,
+    },
+  ]);
+
+  const [rowData, setRowData] = useState([
+    {
+      name: "OpenAI Key",
+      type: "Credential",
+      value: "apijpioj09u302j0982ejf",
+      defaultFields: "Open AI API Key",
+    },
+    {
+      name: "Prompt",
+      type: "Prompt",
+      value: `Answer user's questions based on the document below:
+
+    ---
+    
+    {Document}
+    
+    ---
+    
+    Question:
+    {Question}
+    
+    Answer:
+    `,
+      defaultFields: ["Prompt"],
+    },
+    {
+      name: "Azure Key",
+      type: "Credential",
+      value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
+      defaultFields: ["Azure API Key"],
+    },
+  ]);
+
+  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">
+        <div className="flex w-full flex-col">
+          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+            General
+            <ForwardedIconComponent
+              name="SlidersHorizontal"
+              className="ml-2 h-5 w-5 text-primary"
+            />
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Manage settings related to Langflow and your account.
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-6">
+        <Card x-chunk="dashboard-04-chunk-1">
+          <CardHeader>
+            <CardTitle>Store Name</CardTitle>
+            <CardDescription>
+              Used to identify your store in the marketplace.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form>
+              <Input placeholder="Store Name" />
+            </form>
+          </CardContent>
+          <CardFooter className="border-t px-6 py-4">
+            <Button>Save</Button>
+          </CardFooter>
+        </Card>
+        <Card x-chunk="dashboard-04-chunk-2">
+          <CardHeader>
+            <CardTitle>Plugins Directory</CardTitle>
+            <CardDescription>
+              The directory within your project, in which your plugins are
+              located.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="flex flex-col gap-4">
+              <Input
+                placeholder="Project Name"
+                defaultValue="/content/plugins"
+              />
+              <div className="flex items-center space-x-2">
+                <Checkbox id="include" defaultChecked />
+                <label
+                  htmlFor="include"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Allow administrators to change the directory.
+                </label>
+              </div>
+            </form>
+          </CardContent>
+          <CardFooter className="border-t px-6 py-4">
+            <Button>Save</Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index f8a13a92c..a4b35284a 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -9,17 +9,18 @@ import AdminPage from "./pages/AdminPage";
 import LoginAdminPage from "./pages/AdminPage/LoginPage";
 import ApiKeysPage from "./pages/ApiKeysPage";
 import FlowPage from "./pages/FlowPage";
-import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";
 import HomePage from "./pages/MainPage";
 import ComponentsComponent from "./pages/MainPage/components/components";
 import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 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 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 ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage";
 
 const Router = () => {
   const navigate = useNavigate();
@@ -56,8 +57,9 @@ const Router = () => {
           </ProtectedRoute>
         }
       >
-        <Route index element={<Navigate replace to={"global-variables"} />} />
+        <Route index element={<Navigate replace to={"general"} />} />
         <Route path="global-variables" element={<GlobalVariablesPage />} />
+        <Route path="general" element={<GeneralPage />} />
         <Route path="shortcuts" element={<ShortcutsPage />} />
       </Route>
       <Route

From cd00b5552de287783826c178f201830bd11bf110 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:41:33 +0200
Subject: [PATCH 051/142] Removed Profile Settings from header

---
 src/frontend/src/components/headerComponent/index.tsx | 9 +--------
 src/frontend/src/routes.tsx                           | 8 --------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index ff48c5f79..af219f2ac 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -187,7 +187,6 @@ export default function Header(): JSX.Element {
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuLabel>General</DropdownMenuLabel>
-                <DropdownMenuSeparator />
                 <DropdownMenuItem
                   className="cursor-pointer"
                   onClick={() => navigate("/settings")}
@@ -196,8 +195,8 @@ export default function Header(): JSX.Element {
                 </DropdownMenuItem>
                 {!autoLogin && (
                   <>
-                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
                     <DropdownMenuSeparator />
+                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
                     {isAdmin && (
                       <DropdownMenuItem
                         className="cursor-pointer"
@@ -206,12 +205,6 @@ export default function Header(): JSX.Element {
                         Admin Page
                       </DropdownMenuItem>
                     )}
-                    <DropdownMenuItem
-                      className="cursor-pointer"
-                      onClick={() => navigate("/account/settings")}
-                    >
-                      Profile Settings
-                    </DropdownMenuItem>
                     <DropdownMenuItem
                       className="cursor-pointer"
                       onClick={() => {
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index a4b35284a..2061017ec 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -145,14 +145,6 @@ const Router = () => {
       />
 
       <Route path="/account">
-        <Route
-          path="settings"
-          element={
-            <ProtectedRoute>
-              <ProfileSettingsPage />
-            </ProtectedRoute>
-          }
-        />
         <Route
           path="delete"
           element={

From ad52526642f86a44b96b4d5988ad68fd7167e68e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 00:56:53 +0200
Subject: [PATCH 052/142] Added Profile settings into General page

---
 .../gradientChooserComponent/index.tsx        |   2 +-
 .../SettingsPage/pages/GeneralPage/index.tsx  | 299 +++++++++++-------
 2 files changed, 191 insertions(+), 110 deletions(-)

diff --git a/src/frontend/src/components/gradientChooserComponent/index.tsx b/src/frontend/src/components/gradientChooserComponent/index.tsx
index bff1fbd51..3467aedb8 100644
--- a/src/frontend/src/components/gradientChooserComponent/index.tsx
+++ b/src/frontend/src/components/gradientChooserComponent/index.tsx
@@ -2,7 +2,7 @@ import { gradients } from "../../utils/styleUtils";
 
 export default function GradientChooserComponent({ value, onChange }) {
   return (
-    <div className="flex flex-wrap items-center justify-center gap-4">
+    <div className="flex flex-wrap items-center justify-start gap-2">
       {gradients.map((gradient, idx) => (
         <div
           onClick={() => {
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index ceeb99697..ac2af4f75 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -1,8 +1,10 @@
-import { Button } from "../../../../components/ui/button";
-
-import { ColDef, ColGroupDef } from "ag-grid-community";
-import { useState } from "react";
+import * as Form from "@radix-ui/react-form";
+import { cloneDeep } from "lodash";
+import { useContext, useEffect, useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import GradientChooserComponent from "../../../../components/gradientChooserComponent";
+import InputComponent from "../../../../components/inputComponent";
+import { Button } from "../../../../components/ui/button";
 import {
   Card,
   CardContent,
@@ -11,71 +13,88 @@ import {
   CardHeader,
   CardTitle,
 } from "../../../../components/ui/card";
-import { Checkbox } from "../../../../components/ui/checkbox";
-import { Input } from "../../../../components/ui/input";
+import {
+  EDIT_PASSWORD_ALERT_LIST,
+  EDIT_PASSWORD_ERROR_ALERT,
+  SAVE_ERROR_ALERT,
+  SAVE_SUCCESS_ALERT,
+} from "../../../../constants/alerts_constants";
+import { CONTROL_PATCH_USER_STATE } from "../../../../constants/constants";
+import { AuthContext } from "../../../../contexts/authContext";
+import { resetPassword, updateUser } from "../../../../controllers/API";
+import useAlertStore from "../../../../stores/alertStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import {
+  inputHandlerEventType,
+  patchUserInputStateType,
+} from "../../../../types/components";
+import { gradients } from "../../../../utils/styleUtils";
 
 export default function GeneralPage() {
-  // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
-    {
-      field: "type",
-      cellEditor: "agSelectCellEditor",
-      cellEditorParams: {
-        values: ["Prompt", "Credential"],
-        valueListGap: 10,
-      },
-      flex: 1,
-      editable: true,
-    },
-    {
-      field: "value",
-      cellEditor: "agLargeTextCellEditor",
-      cellEditorPopup: true,
-      flex: 2,
-      editable: true,
-    },
-    {
-      headerName: "Apply To Fields",
-      field: "defaultFields",
-      flex: 1,
-      editable: true,
-    },
-  ]);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
 
-  const [rowData, setRowData] = useState([
-    {
-      name: "OpenAI Key",
-      type: "Credential",
-      value: "apijpioj09u302j0982ejf",
-      defaultFields: "Open AI API Key",
-    },
-    {
-      name: "Prompt",
-      type: "Prompt",
-      value: `Answer user's questions based on the document below:
+  const [inputState, setInputState] = useState<patchUserInputStateType>(
+    CONTROL_PATCH_USER_STATE
+  );
 
-    ---
-    
-    {Document}
-    
-    ---
-    
-    Question:
-    {Question}
-    
-    Answer:
-    `,
-      defaultFields: ["Prompt"],
-    },
-    {
-      name: "Azure Key",
-      type: "Credential",
-      value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
-      defaultFields: ["Azure API Key"],
-    },
-  ]);
+  const { autoLogin } = useContext(AuthContext);
 
+  // set null id
+  useEffect(() => {
+    setCurrentFlowId("");
+  }, []);
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const { userData, setUserData } = useContext(AuthContext);
+  const { password, cnfPassword, gradient } = inputState;
+
+  async function handlePatchPassword() {
+    if (password !== cnfPassword) {
+      setErrorData({
+        title: EDIT_PASSWORD_ERROR_ALERT,
+        list: [EDIT_PASSWORD_ALERT_LIST],
+      });
+      return;
+    }
+    try {
+      if (password !== "") await resetPassword(userData!.id, { password });
+      handleInput({ target: { name: "password", value: "" } });
+      handleInput({ target: { name: "cnfPassword", value: "" } });
+      setSuccessData({ title: SAVE_SUCCESS_ALERT });
+    } catch (error) {
+      setErrorData({
+        title: SAVE_ERROR_ALERT,
+        list: [(error as any).response.data.detail],
+      });
+    }
+  }
+
+  async function handlePatchGradient() {
+    try {
+      if (gradient !== "")
+        await updateUser(userData!.id, { profile_image: gradient });
+      if (gradient !== "") {
+        let newUserData = cloneDeep(userData);
+        newUserData!.profile_image = gradient;
+
+        setUserData(newUserData);
+      }
+      setSuccessData({ title: SAVE_SUCCESS_ALERT });
+    } catch (error) {
+      setErrorData({
+        title: SAVE_ERROR_ALERT,
+        list: [(error as any).response.data.detail],
+      });
+    }
+  }
+
+  function handleInput({
+    target: { name, value },
+  }: inputHandlerEventType): void {
+    setInputState((prev) => ({ ...prev, [name]: value }));
+  }
   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">
@@ -94,51 +113,113 @@ export default function GeneralPage() {
       </div>
 
       <div className="grid gap-6">
-        <Card x-chunk="dashboard-04-chunk-1">
-          <CardHeader>
-            <CardTitle>Store Name</CardTitle>
-            <CardDescription>
-              Used to identify your store in the marketplace.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form>
-              <Input placeholder="Store Name" />
-            </form>
-          </CardContent>
-          <CardFooter className="border-t px-6 py-4">
-            <Button>Save</Button>
-          </CardFooter>
-        </Card>
-        <Card x-chunk="dashboard-04-chunk-2">
-          <CardHeader>
-            <CardTitle>Plugins Directory</CardTitle>
-            <CardDescription>
-              The directory within your project, in which your plugins are
-              located.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form className="flex flex-col gap-4">
-              <Input
-                placeholder="Project Name"
-                defaultValue="/content/plugins"
-              />
-              <div className="flex items-center space-x-2">
-                <Checkbox id="include" defaultChecked />
-                <label
-                  htmlFor="include"
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                  Allow administrators to change the directory.
-                </label>
-              </div>
-            </form>
-          </CardContent>
-          <CardFooter className="border-t px-6 py-4">
-            <Button>Save</Button>
-          </CardFooter>
-        </Card>
+        {!autoLogin && (
+          <>
+            <Form.Root
+              onSubmit={(event) => {
+                handlePatchGradient();
+                event.preventDefault();
+              }}
+            >
+              <Card x-chunk="dashboard-04-chunk-1">
+                <CardHeader>
+                  <CardTitle>Profile Gradient</CardTitle>
+                  <CardDescription>
+                    Choose the gradient that appears as your profile picture.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="py-2">
+                    <GradientChooserComponent
+                      value={
+                        gradient == ""
+                          ? userData?.profile_image ??
+                            gradients[
+                              parseInt(userData?.id ?? "", 30) %
+                                gradients.length
+                            ]
+                          : gradient
+                      }
+                      onChange={(value) => {
+                        handleInput({ target: { name: "gradient", value } });
+                      }}
+                    />
+                  </div>
+                </CardContent>
+                <CardFooter className="border-t px-6 py-4">
+                  <Form.Submit asChild>
+                    <Button type="submit">Save</Button>
+                  </Form.Submit>
+                </CardFooter>
+              </Card>
+            </Form.Root>
+            <Form.Root
+              onSubmit={(event) => {
+                handlePatchPassword();
+                event.preventDefault();
+              }}
+            >
+              <Card x-chunk="dashboard-04-chunk-2">
+                <CardHeader>
+                  <CardTitle>Password</CardTitle>
+                  <CardDescription>
+                    Type your new password and confirm it.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex w-full gap-4">
+                    <Form.Field name="password" className="w-full">
+                      <InputComponent
+                        id="pasword"
+                        onChange={(value) => {
+                          handleInput({ target: { name: "password", value } });
+                        }}
+                        value={password}
+                        isForm
+                        password={true}
+                        placeholder="Password"
+                        className="w-full"
+                      />
+                      <Form.Message
+                        match="valueMissing"
+                        className="field-invalid"
+                      >
+                        Please enter your password
+                      </Form.Message>
+                    </Form.Field>
+                    <Form.Field name="cnfPassword" className="w-full">
+                      <InputComponent
+                        id="cnfPassword"
+                        onChange={(value) => {
+                          handleInput({
+                            target: { name: "cnfPassword", value },
+                          });
+                        }}
+                        value={cnfPassword}
+                        isForm
+                        password={true}
+                        placeholder="Confirm Password"
+                        className="w-full"
+                      />
+
+                      <Form.Message
+                        className="field-invalid"
+                        match="valueMissing"
+                      >
+                        Please confirm your password
+                      </Form.Message>
+                    </Form.Field>
+                  </div>
+                </CardContent>
+                <CardFooter className="border-t px-6 py-4">
+                  <Form.Submit asChild>
+                    <Button type="submit">Save</Button>
+                  </Form.Submit>
+                </CardFooter>
+              </Card>
+            </Form.Root>
+          </>
+        )}
       </div>
     </div>
   );

From de5116a6bf41f93f9159aa9d6333cd2615234be8 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 01:02:12 +0200
Subject: [PATCH 053/142] Fixed pagination that cant be changed on table

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

diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index 20b9083d9..d5fdcd712 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -9,7 +9,7 @@ import { cn } from "../../utils/utils";
 const TableComponent = forwardRef<
   ElementRef<typeof AgGridReact>,
   ComponentPropsWithoutRef<typeof AgGridReact>
->(({ ...props }, ref) => {
+>(({ pagination = true, ...props }, ref) => {
   const dark = useDarkStore((state) => state.dark);
 
   return (
@@ -20,7 +20,7 @@ const TableComponent = forwardRef<
           "ag-theme-shadcn flex h-full flex-col pb-8"
         )} // applying the grid theme
       >
-        <AgGridReact ref={ref} pagination={true} {...props} />
+        <AgGridReact ref={ref} {...props} />
       </div>
     </div>
   );

From 1dcb151c61c84f79f1b9188af69da14e523af87d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 01:10:22 +0200
Subject: [PATCH 054/142] Added shortcuts into a card in the Shortcuts page

---
 .../src/components/tableComponent/index.tsx   |  2 +-
 .../pages/ShortcutsPage/index.tsx             | 29 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx
index d5fdcd712..300aa5cc3 100644
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/src/frontend/src/components/tableComponent/index.tsx
@@ -17,7 +17,7 @@ const TableComponent = forwardRef<
       <div
         className={cn(
           dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-          "ag-theme-shadcn flex h-full flex-col pb-8"
+          "ag-theme-shadcn flex h-full flex-col"
         )} // applying the grid theme
       >
         <AgGridReact ref={ref} {...props} />
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index 09ac72d06..bb7131382 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -2,6 +2,13 @@ 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";
@@ -78,7 +85,7 @@ export default function ShortcutsPage() {
     },
   ]);
   return (
-    <div className="flex h-full w-full flex-col justify-between gap-6">
+    <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">
         <div className="flex w-full flex-col">
           <h2 className="flex items-center text-lg font-semibold tracking-tight">
@@ -94,9 +101,23 @@ export default function ShortcutsPage() {
           </p>
         </div>
       </div>
-
-      <div className="flex h-full w-full flex-col justify-between">
-        <TableComponent columnDefs={colDefs} rowData={rowData} />
+      <div className="grid gap-6">
+        <Card x-chunk="dashboard-04-chunk-2">
+          <CardHeader>
+            <CardTitle>Nodes</CardTitle>
+            <CardDescription>
+              Shortcuts relating to the nodes in the workspace.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TableComponent
+              domLayout="autoHeight"
+              pagination={false}
+              columnDefs={colDefs}
+              rowData={rowData}
+            />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

From 1f7c6971586cdc1a6312a597055636e9fa46ae3f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 01:11:05 +0200
Subject: [PATCH 055/142] Added padding bottom on Global Variables

---
 .../src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 791cde349..09fd0be75 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -95,7 +95,7 @@ export default function GlobalVariablesPage() {
         </div>
       </div>
 
-      <div className="flex h-full w-full flex-col justify-between">
+      <div className="flex h-full w-full flex-col justify-between pb-8">
         <TableComponent columnDefs={colDefs} rowData={rowData} />
       </div>
     </div>

From 7e337c7f6550b2985d86d93df9eb06cda9d1714b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 01:26:25 +0200
Subject: [PATCH 056/142] Added selection and trash

---
 .../pages/GlobalVariablesPage/index.tsx       | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 09fd0be75..9818c5e81 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -1,16 +1,24 @@
 import IconComponent from "../../../../components/genericIconComponent";
 import { Button } from "../../../../components/ui/button";
 
+import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
+import { useState } from "react";
 import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
-import { useState } from "react";
-import { ColDef, ColGroupDef } from "ag-grid-community";
+import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Variable Name", field: "name", flex: 1 }, //This column will be twice as wide as the others
+    {
+      headerCheckboxSelection: true,
+      checkboxSelection: true,
+      showDisabledCheckboxes: true,
+      headerName: "Variable Name",
+      field: "name",
+      flex: 1,
+    }, //This column will be twice as wide as the others
     {
       field: "type",
       cellEditor: "agSelectCellEditor",
@@ -69,6 +77,8 @@ export default function GlobalVariablesPage() {
     },
   ]);
 
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
+
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@@ -81,11 +91,18 @@ export default function GlobalVariablesPage() {
             />
           </h2>
           <p className="text-sm text-muted-foreground">
-            Manage and assign global variables to default fields. You can add
-            new global variables by clicking the button.
+            Manage global variables and assign them to fields.
           </p>
         </div>
-        <div className="flex-shrink-0">
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <Button
+            data-testid="api-key-button-store"
+            variant="primary"
+            className="px-2 group"
+            disabled={selectedRows.length === 0}
+          >
+            <IconComponent name="Trash2" className={cn("h-5 w-5 text-destructive group-disabled:text-primary")} />
+          </Button>
           <AddNewVariableButton>
             <Button data-testid="api-key-button-store" variant="primary">
               <IconComponent name="Plus" className="mr-2 w-4" />
@@ -96,7 +113,15 @@ export default function GlobalVariablesPage() {
       </div>
 
       <div className="flex h-full w-full flex-col justify-between pb-8">
-        <TableComponent columnDefs={colDefs} rowData={rowData} />
+        <TableComponent
+          onSelectionChanged={(event: SelectionChangedEvent) => {
+            setSelectedRows(event.api.getSelectedRows().map((row) => row.name));
+          }}
+          rowSelection="multiple"
+          suppressRowClickSelection={true}
+          columnDefs={colDefs}
+          rowData={rowData}
+        />
       </div>
     </div>
   );

From db9cc5e052b8d9114f04e94a3cb873d22b7778fc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 01:36:56 +0200
Subject: [PATCH 057/142] Added badge as renderer of type on Global Variables

---
 .../pages/GlobalVariablesPage/index.tsx       | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 9818c5e81..99e1a58a8 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -6,9 +6,19 @@ import { useState } from "react";
 import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
+import { Badge } from "../../../../components/ui/badge";
 import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
+  const BadgeRenderer = (props) => {
+    return (
+      <div>
+        <Badge variant="outline" size="md" className="font-normal">
+          {props.value}
+        </Badge>
+      </div>
+    );
+  };
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
     {
@@ -21,6 +31,7 @@ export default function GlobalVariablesPage() {
     }, //This column will be twice as wide as the others
     {
       field: "type",
+      cellRenderer: BadgeRenderer,
       cellEditor: "agSelectCellEditor",
       cellEditorParams: {
         values: ["Prompt", "Credential"],
@@ -98,10 +109,15 @@ export default function GlobalVariablesPage() {
           <Button
             data-testid="api-key-button-store"
             variant="primary"
-            className="px-2 group"
+            className="group px-2"
             disabled={selectedRows.length === 0}
           >
-            <IconComponent name="Trash2" className={cn("h-5 w-5 text-destructive group-disabled:text-primary")} />
+            <IconComponent
+              name="Trash2"
+              className={cn(
+                "h-5 w-5 text-destructive group-disabled:text-primary"
+              )}
+            />
           </Button>
           <AddNewVariableButton>
             <Button data-testid="api-key-button-store" variant="primary">

From 7309a36aa8ffe8a7552112b2fbb724732db9001d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 02:01:44 +0200
Subject: [PATCH 058/142] Added own dropdown to Type

---
 .../components/dropdownComponent/index.tsx    | 81 ++++++++++---------
 .../pages/GlobalVariablesPage/index.tsx       | 14 +++-
 src/frontend/src/types/components/index.ts    | 10 +--
 3 files changed, 57 insertions(+), 48 deletions(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 67b9c5d82..c3407aba8 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -1,3 +1,4 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
 import { useRef, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { cn } from "../../utils/utils";
@@ -13,6 +14,7 @@ import {
 } from "../ui/command";
 import {
   Popover,
+  PopoverContent,
   PopoverContentWithoutPortal,
   PopoverTrigger,
 } from "../ui/popover";
@@ -25,50 +27,57 @@ export default function Dropdown({
   onSelect,
   editNode = false,
   id = "",
+  children,
 }: DropDownComponentType): JSX.Element {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(children ? true : false);
 
   const refButton = useRef<HTMLButtonElement>(null);
 
+  const PopoverContentDropdown = children ? PopoverContent : PopoverContentWithoutPortal;
+
   return (
     <>
       {Object.keys(options)?.length > 0 ? (
         <>
-          <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-              <Button
-                disabled={disabled}
-                variant="primary"
-                size="xs"
-                role="combobox"
-                ref={refButton}
-                aria-expanded={open}
-                data-testid={`${id ?? ""}`}
-                className={cn(
-                  editNode
-                    ? "dropdown-component-outline"
-                    : "dropdown-component-false-outline",
-                  "w-full justify-between font-normal",
-                  editNode ? "input-edit-node" : "py-2"
-                )}
-              >
-                <span data-testid={`value-dropdown-` + id}>
-                  {value &&
-                  value !== "" &&
-                  options.find((option) => option === value)
-                    ? options.find((option) => option === value)
-                    : "Choose an option..."}
-                </span>
+          <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
+            {children ? (
+              <PopoverAnchor>{children}</PopoverAnchor>
+            ) : (
+              <PopoverTrigger asChild>
+                <Button
+                  disabled={disabled}
+                  variant="primary"
+                  size="xs"
+                  role="combobox"
+                  ref={refButton}
+                  aria-expanded={open}
+                  data-testid={`${id ?? ""}`}
+                  className={cn(
+                    editNode
+                      ? "dropdown-component-outline"
+                      : "dropdown-component-false-outline",
+                    "w-full justify-between font-normal",
+                    editNode ? "input-edit-node" : "py-2"
+                  )}
+                >
+                  <span data-testid={`value-dropdown-` + id}>
+                    {value &&
+                    value !== "" &&
+                    options.find((option) => option === value)
+                      ? options.find((option) => option === value)
+                      : "Choose an option..."}
+                  </span>
 
-                <ForwardedIconComponent
-                  name="ChevronsUpDown"
-                  className="ml-2 h-4 w-4 shrink-0 opacity-50"
-                />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContentWithoutPortal
-              className="nocopy nowheel nopan nodelete nodrag noundo w-full p-0"
-              style={{ minWidth: refButton?.current?.clientWidth ?? "200px" }}
+                  <ForwardedIconComponent
+                    name="ChevronsUpDown"
+                    className="ml-2 h-4 w-4 shrink-0 opacity-50"
+                  />
+                </Button>
+              </PopoverTrigger>
+            )}
+            <PopoverContentDropdown
+              className="nocopy nowheel nopan nodelete nodrag noundo p-0"
+              style={children ? {} : { minWidth: refButton?.current?.clientWidth ?? "200px" }}
             >
               <Command>
                 <CommandInput placeholder="Search options..." className="h-9" />
@@ -98,7 +107,7 @@ export default function Dropdown({
                   </CommandGroup>
                 </CommandList>
               </Command>
-            </PopoverContentWithoutPortal>
+            </PopoverContentDropdown>
           </Popover>
         </>
       ) : (
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 99e1a58a8..ad88bc6f2 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -4,6 +4,7 @@ import { Button } from "../../../../components/ui/button";
 import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
 import { useState } from "react";
 import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
+import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
@@ -19,6 +20,14 @@ export default function GlobalVariablesPage() {
       </div>
     );
   };
+
+  const DropdownEditor = ({ options, value, onValueChange }) => {
+    return (
+      <Dropdown options={options} value={value} onSelect={onValueChange}>
+        <div className="-mt-1.5 w-full"></div>
+      </Dropdown>
+    );
+  };
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
     {
@@ -32,10 +41,9 @@ export default function GlobalVariablesPage() {
     {
       field: "type",
       cellRenderer: BadgeRenderer,
-      cellEditor: "agSelectCellEditor",
+      cellEditor: DropdownEditor,
       cellEditorParams: {
-        values: ["Prompt", "Credential"],
-        valueListGap: 10,
+        options: ["Prompt", "Credential"],
       },
       flex: 1,
       editable: true,
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 4fb2ca1b7..353443572 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -45,6 +45,7 @@ export type DropDownComponentType = {
   onSelect: (value: string) => void;
   editNode?: boolean;
   id?: string;
+  children?: ReactNode;
 };
 export type ParameterComponentType = {
   data: NodeDataType;
@@ -80,15 +81,6 @@ export type InputGlobalComponentType = {
   editNode?: boolean;
 };
 
-export type InputGlobalComponentType = {
-  disabled: boolean;
-  onChange: (value: string) => void;
-  setDb: (value: boolean) => void;
-  name: string;
-  data: NodeDataType;
-  editNode?: boolean;
-};
-
 export type KeyPairListComponentType = {
   value: any;
   onChange: (value: Object[]) => void;

From ec3425e3d9d8697702903612db53b286dfa69410 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 Apr 2024 22:53:37 -0300
Subject: [PATCH 059/142] Refactored globalVariables.ts and
 globalVariables/index.ts to add support for unavailable fields

---
 src/frontend/src/stores/globalVariables.ts             | 10 ++++++++++
 .../src/types/zustand/globalVariables/index.ts         |  4 ++++
 2 files changed, 14 insertions(+)

diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 6cbb8a641..913bd278d 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -4,6 +4,16 @@ import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
     avaliableFields: [],
+    unavaliableFields: new Set(),
+    setUnavaliableFields: (fields) => {
+      set({ unavaliableFields: fields });
+    },
+    addUnavaliableField: (field) => {
+      set({ unavaliableFields: get().unavaliableFields.add(field) });
+    },
+    removeUnavaliableField: (field) => {
+      get().unavaliableFields.delete(field);
+    },
     setAvaliableFields: (fields) => {
       set({ avaliableFields: fields });
     },
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index fbf7f0675..f94dc868b 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -10,4 +10,8 @@ export type GlobalVariablesStore = {
   avaliableFields: Array<string>;
   setAvaliableFields: (fields: Array<string>) => void;
   addAvaliableField: (field: string) => void;
+  unavaliableFields: Set<string>;
+  setUnavaliableFields: (fields: Set<string>) => void;
+  addUnavaliableField: (field: string) => void;
+  removeUnavaliableField: (field: string) => void;
 };

From a2885a86bcbf1b49a776e075723558a4e2ff5643 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 Apr 2024 22:59:02 -0300
Subject: [PATCH 060/142] Refactored globalVariables.ts and
 globalVariables/index.ts to use Set for availableFields

---
 src/frontend/src/stores/globalVariables.ts              | 4 ++--
 src/frontend/src/types/zustand/globalVariables/index.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 913bd278d..6e17384e6 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -3,7 +3,7 @@ import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
-    avaliableFields: [],
+    avaliableFields: new Set(),
     unavaliableFields: new Set(),
     setUnavaliableFields: (fields) => {
       set({ unavaliableFields: fields });
@@ -18,7 +18,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({ avaliableFields: fields });
     },
     addAvaliableField: (field) => {
-      set({ avaliableFields: [...get().avaliableFields, field] });
+      set({ avaliableFields: get().avaliableFields.add(field) });
     },
     globalVariablesEntries: [],
     globalVariables: {},
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index f94dc868b..9c4fe421b 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -7,8 +7,8 @@ export type GlobalVariablesStore = {
   addGlobalVariable: (name: string, id: string, type?: string) => void;
   removeGlobalVariable: (name: string) => void;
   getVariableId: (name: string) => string | undefined;
-  avaliableFields: Array<string>;
-  setAvaliableFields: (fields: Array<string>) => void;
+  avaliableFields: Set<string>;
+  setAvaliableFields: (fields: Set<string>) => void;
   addAvaliableField: (field: string) => void;
   unavaliableFields: Set<string>;
   setUnavaliableFields: (fields: Set<string>) => void;

From fe5f6560e7f353939419538ae4e3a88426e0dc5d Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 Apr 2024 23:27:23 -0300
Subject: [PATCH 061/142] Refactored globalVariables.ts and
 globalVariables/index.ts to extract and store component fields

---
 src/frontend/src/stores/flowsManagerStore.ts       |  5 +++++
 src/frontend/src/stores/globalVariables.ts         |  7 -------
 src/frontend/src/stores/typesStore.ts              | 14 +++++++++++---
 .../src/types/zustand/globalVariables/index.ts     |  3 ---
 src/frontend/src/types/zustand/types/index.ts      |  3 +++
 src/frontend/src/utils/reactflowUtils.ts           |  7 ++++---
 6 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 9471889c3..94d104823 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -22,6 +22,7 @@ import {
   addVersionToDuplicates,
   createFlowComponent,
   createNewFlow,
+  extractFieldsFromComponenents,
   processDataFromFlow,
   processFlows,
 } from "../utils/reactflowUtils";
@@ -82,6 +83,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
             );
             useTypesStore.setState((state) => ({
               data: { ...state.data, ["saved_components"]: data },
+              ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
             }));
             set({ isLoading: false });
             resolve();
@@ -197,6 +199,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           set({ isLoading: false });
           useTypesStore.setState((state) => ({
             data: { ...state.data, ["saved_components"]: data },
+            ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
           }));
         }, 200);
         // addFlowToLocalState(newFlow);
@@ -219,6 +222,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         set({ isLoading: false });
         useTypesStore.setState((state) => ({
           data: { ...state.data, ["saved_components"]: data },
+          ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
         }));
 
         // Return the id
@@ -248,6 +252,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           set({ isLoading: false });
           useTypesStore.setState((state) => ({
             data: { ...state.data, ["saved_components"]: data },
+            ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
           }));
           resolve();
         });
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 6e17384e6..d9a326b08 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -3,7 +3,6 @@ import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
-    avaliableFields: new Set(),
     unavaliableFields: new Set(),
     setUnavaliableFields: (fields) => {
       set({ unavaliableFields: fields });
@@ -14,12 +13,6 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
     removeUnavaliableField: (field) => {
       get().unavaliableFields.delete(field);
     },
-    setAvaliableFields: (fields) => {
-      set({ avaliableFields: fields });
-    },
-    addAvaliableField: (field) => {
-      set({ avaliableFields: get().avaliableFields.add(field) });
-    },
     globalVariablesEntries: [],
     globalVariables: {},
     setGlobalVariables: (variables) => {
diff --git a/src/frontend/src/stores/typesStore.ts b/src/frontend/src/stores/typesStore.ts
index 95223087f..f2539a8d3 100644
--- a/src/frontend/src/stores/typesStore.ts
+++ b/src/frontend/src/stores/typesStore.ts
@@ -2,11 +2,18 @@ import { create } from "zustand";
 import { getAll } from "../controllers/API";
 import { APIDataType } from "../types/api";
 import { TypesStoreType } from "../types/zustand/types";
-import { templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
+import { extractFieldsFromComponenents, templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
 import useAlertStore from "./alertStore";
 import useFlowsManagerStore from "./flowsManagerStore";
 
 export const useTypesStore = create<TypesStoreType>((set, get) => ({
+  ComponentFields: new Set(),
+  setComponentFields: (fields) => {
+    set({ ComponentFields: fields });
+  },
+  addComponentField: (field) => {
+    set({ ComponentFields: get().ComponentFields.add(field) });
+  },
   types: {},
   templates: {},
   data: {},
@@ -21,10 +28,10 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
           set((old) => ({
             types: typesGenerator(data),
             data: { ...old.data, ...data },
+            ComponentFields: extractFieldsFromComponenents({ ...old.data, ...data }),
             templates: templatesGenerator(data),
           }));
           setLoading(false);
-          console.log(templatesGenerator(data))
           resolve();
         })
         .catch((error) => {
@@ -43,6 +50,7 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
   },
   setData: (change: APIDataType | ((old: APIDataType) => APIDataType)) => {
     let newChange = typeof change === "function" ? change(get().data) : change;
-    set({ data: newChange });
+    set({ data: newChange});
+    get().setComponentFields(extractFieldsFromComponenents(newChange));
   },
 }));
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 9c4fe421b..c5f6c24d2 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -7,9 +7,6 @@ export type GlobalVariablesStore = {
   addGlobalVariable: (name: string, id: string, type?: string) => void;
   removeGlobalVariable: (name: string) => void;
   getVariableId: (name: string) => string | undefined;
-  avaliableFields: Set<string>;
-  setAvaliableFields: (fields: Set<string>) => void;
-  addAvaliableField: (field: string) => void;
   unavaliableFields: Set<string>;
   setUnavaliableFields: (fields: Set<string>) => void;
   addUnavaliableField: (field: string) => void;
diff --git a/src/frontend/src/types/zustand/types/index.ts b/src/frontend/src/types/zustand/types/index.ts
index 133afbda1..4f817de47 100644
--- a/src/frontend/src/types/zustand/types/index.ts
+++ b/src/frontend/src/types/zustand/types/index.ts
@@ -8,4 +8,7 @@ export type TypesStoreType = {
   data: APIDataType;
   setData: (newState: {}) => void;
   getTypes: () => Promise<void>;
+  ComponentFields: Set<string>;
+  setComponentFields: (fields: Set<string>) => void;
+  addComponentField: (field: string) => void;
 };
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 49aae5b7a..ad1244495 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1235,16 +1235,17 @@ export function templatesGenerator(data: APIObjectType) {
 }
 
 export function extractFieldsFromComponenents(data:APIObjectType ) {
-  const fields = new Set();
+  const fields = new Set<string>();
   Object.keys(data).forEach((key) => {
     Object.keys(data[key]).forEach((kind) => {
       Object.keys(data[key][kind].template).forEach((field) => {
         if(data[key][kind].template[field].display_name && data[key][kind].template[field].show)
-        fields.add(data[key][kind].template[field].display_name);
+        fields.add(data[key][kind].template[field].display_name!);
       });
     });
   });
-  return Array.from(fields);
+  console.log(fields);
+  return fields;
 }
 
 export function downloadFlow(

From 8e78e23a9a58116e8b6a57b16512241570d97ed1 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 29 Apr 2024 23:29:06 -0300
Subject: [PATCH 062/142] Refactored addNewVariableButton.tsx to use
 useTypesStore for componentFields

---
 .../addNewVariableButtonComponent/addNewVariableButton.tsx      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 8dab6420f..0c83eefff 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -10,6 +10,7 @@ import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
+import { useTypesStore } from "../../stores/typesStore";
 
 //TODO IMPLEMENT FORM LOGIC
 
@@ -19,6 +20,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [type, setType] = useState("");
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
+  const componentFields = useTypesStore((state) => state.ComponentFields);
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );

From c23943017d0d57ee28550cc93a6f2dcaa2cefc16 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Tue, 30 Apr 2024 01:20:46 -0300
Subject: [PATCH 063/142] Refactor: Global Variables table are now populated by
 backend and delete button works

---
 .../pages/GlobalVariablesPage/index.tsx       | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index ad88bc6f2..867a078b7 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -2,15 +2,25 @@ import IconComponent from "../../../../components/genericIconComponent";
 import { Button } from "../../../../components/ui/button";
 
 import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
 import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
 import { cn } from "../../../../utils/utils";
+import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 
 export default function GlobalVariablesPage() {
+  const rows: Array<{type: string | undefined; id: string; name: string}> = [];
+  const globalVariablesEntries = useGlobalVariablesStore(state => state.globalVariablesEntries);
+  const removeGlobalVariable = useGlobalVariablesStore(state => state.removeGlobalVariable);
+  const globalVariables = useGlobalVariablesStore(state => state.globalVariables);
+  globalVariablesEntries.forEach((e) => {
+    const globalVariableObj = globalVariables[e]
+    rows.push({type: globalVariableObj.type, id: globalVariableObj.id, name: e})
+  })
+
   const BadgeRenderer = (props) => {
     return (
       <div>
@@ -21,6 +31,10 @@ export default function GlobalVariablesPage() {
     );
   };
 
+  useEffect(() => {
+    setRowData(rows)
+  }, [globalVariables])
+
   const DropdownEditor = ({ options, value, onValueChange }) => {
     return (
       <Dropdown options={options} value={value} onSelect={onValueChange}>
@@ -98,6 +112,12 @@ export default function GlobalVariablesPage() {
 
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
+  function removeVariables() {
+    selectedRows.forEach(row => {
+      removeGlobalVariable(row)
+    })
+  }
+
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@@ -119,6 +139,7 @@ export default function GlobalVariablesPage() {
             variant="primary"
             className="group px-2"
             disabled={selectedRows.length === 0}
+            onClick={removeVariables}
           >
             <IconComponent
               name="Trash2"

From bd0e928efe726c2da6ca292ba400aa32695bdaea Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 08:22:32 -0300
Subject: [PATCH 064/142] temp fix for default fields

---
 src/frontend/src/controllers/API/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 920335a97..8c5cc6892 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -876,15 +876,18 @@ export async function registerGlobalVariable({
   name,
   value,
   type,
+  default_fields=[],
 }: {
   name: string;
   value: string;
   type?: string;
+  default_fields?: string[];
 }): Promise<AxiosResponse<{ name: string; id: string; type: string }>> {
   return await api.post(`${BASE_URL_API}variables/`, {
     name,
     value,
     type,
+    default_fields:default_fields
   });
 }
 

From 9c0ae350bf16c858d1d9017f5d42dddf222f78c7 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa
 <72977554+Cristhianzl@users.noreply.github.com>
Date: Tue, 30 Apr 2024 09:39:50 -0300
Subject: [PATCH 065/142] Fix modal opening bug when not supposed to (#1795)

* fix opening modal error

* Fix cleanOnClose behavior in IOModal component

* Refactor useEffect dependency in CollectionCardComponent

* remove console

* add console.log for debugging

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
---
 .../src/components/cardComponent/index.tsx    | 482 +++++++++---------
 src/frontend/src/modals/IOModal/index.tsx     |  15 -
 src/frontend/src/pages/Playground/index.tsx   |   6 +
 3 files changed, 257 insertions(+), 246 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index f342960ab..b6c7af538 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
+import IOModal from "../../modals/IOModal";
 import useAlertStore from "../../stores/alertStore";
+import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
@@ -18,11 +20,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
-import IOModal from "../../modals/IOModal";
-import useFlowStore from "../../stores/flowStore";
-import { set } from "lodash";
-import LoadingComponent from "../loadingComponent";
-import { f } from "million/dist/shared/million.9d4df3c1";
 import Loading from "../ui/loading";
 
 export default function CollectionCardComponent({
@@ -31,7 +28,7 @@ export default function CollectionCardComponent({
   disabled = false,
   button,
   onDelete,
-  playground
+  playground,
 }: {
   data: storeComponent;
   authorized?: boolean;
@@ -62,25 +59,32 @@ export default function CollectionCardComponent({
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
   const [openPlayground, setOpenPlayground] = useState(false);
-  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
   const [loadingPlayground, setLoadingPlayground] = useState(false);
 
-
   const name = data.is_component ? "Component" : "Flow";
 
   async function getFlowData() {
-    const res = await getComponent(data.id)
+    const res = await getComponent(data.id);
     const newFlow = cloneFLowWithParent(res, res.id, data.is_component, true);
     return newFlow;
   }
 
   useEffect(() => {
     if (currentFlowId && playground) {
-      setNodes(currentFlow?.data?.nodes ?? [], true);
-      setEdges(currentFlow?.data?.edges ?? [], true);
-      cleanFlowPool();
+      if(openPlayground){
+        setNodes(currentFlow?.data?.nodes ?? [], true);
+        setEdges(currentFlow?.data?.edges ?? [], true);
+      }
+      else{
+        setNodes([], true);
+        setEdges([], true);
+        cleanFlowPool();
+      }
     }
-  }, [currentFlowId]);
+  }, [openPlayground]);
 
   useEffect(() => {
     if (data) {
@@ -100,16 +104,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"]],
             });
           });
@@ -159,269 +165,283 @@ export default function CollectionCardComponent({
   }
 
   return (
-    <Card
-      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" : ""
-      )}
-    >
-      <div>
-        <CardHeader>
-          <div>
-            <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-              <IconComponent
-                className={cn(
-                  "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"
-                )}
-                name={data.is_component ? "ToyBrick" : "Group"}
-              />
-              <ShadTooltip content={data.name}>
-                <div className="w-full truncate">{data.name}</div>
-              </ShadTooltip>
-              {data?.metadata !== undefined && (
-                <div className="flex gap-3">
-                  {data.private && (
-                    <ShadTooltip content="Private">
-                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent name="Lock" className="h-4 w-4" />
-                      </span>
-                    </ShadTooltip>
+    <>
+      <Card
+        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" : ""
+        )}
+      >
+        <div>
+          <CardHeader>
+            <div>
+              <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+                <IconComponent
+                  className={cn(
+                    "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"
                   )}
-                  {!data.is_component && (
-                    <ShadTooltip content="Components">
+                  name={data.is_component ? "ToyBrick" : "Group"}
+                />
+                <ShadTooltip content={data.name}>
+                  <div className="w-full truncate">{data.name}</div>
+                </ShadTooltip>
+                {data?.metadata !== undefined && (
+                  <div className="flex gap-3">
+                    {data.private && (
+                      <ShadTooltip content="Private">
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <IconComponent name="Lock" className="h-4 w-4" />
+                        </span>
+                      </ShadTooltip>
+                    )}
+                    {!data.is_component && (
+                      <ShadTooltip content="Components">
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <IconComponent name="ToyBrick" className="h-4 w-4" />
+                          <span data-testid={`total-${data.name}`}>
+                            {data?.metadata?.total ?? 0}
+                          </span>
+                        </span>
+                      </ShadTooltip>
+                    )}
+                    <ShadTooltip content="Likes">
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent name="ToyBrick" className="h-4 w-4" />
-                        <span data-testid={`total-${data.name}`}>
-                          {data?.metadata?.total ?? 0}
+                        <IconComponent
+                          name="Heart"
+                          className={cn("h-4 w-4 ")}
+                        />
+                        <span data-testid={`likes-${data.name}`}>
+                          {likes_count ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
-                  )}
-                  <ShadTooltip content="Likes">
-                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
-                      <span data-testid={`likes-${data.name}`}>
-                        {likes_count ?? 0}
+                    <ShadTooltip content="Downloads">
+                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                        <IconComponent
+                          name="DownloadCloud"
+                          className="h-4 w-4"
+                        />
+                        <span data-testid={`downloads-${data.name}`}>
+                          {downloads_count ?? 0}
+                        </span>
                       </span>
-                    </span>
-                  </ShadTooltip>
-                  <ShadTooltip content="Downloads">
-                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="DownloadCloud" className="h-4 w-4" />
-                      <span data-testid={`downloads-${data.name}`}>
-                        {downloads_count ?? 0}
-                      </span>
-                    </span>
-                  </ShadTooltip>
-                </div>
-              )}
+                    </ShadTooltip>
+                  </div>
+                )}
 
-              {onDelete && data?.metadata === undefined && (
-                <DeleteConfirmationModal
-                  onConfirm={() => {
-                    onDelete();
-                  }}
-                >
-                  <IconComponent
-                    name="Trash2"
-                    className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
-                  />
-                </DeleteConfirmationModal>
-              )}
-            </CardTitle>
-          </div>
-          {data.user_created && data.user_created.username && (
-            <span className="text-sm text-primary">
-              by <b>{data.user_created.username}</b>
-              {data.last_tested_version && (
-                <>
-                  {" "}
-                  |{" "}
-                  <span className="text-xs">
-                    {" "}
-                    ⛓︎ v{data.last_tested_version}
-                  </span>
-                </>
-              )}
-            </span>
-          )}
-
-          <CardDescription className="pb-2 pt-2">
-            <div className="truncate-doubleline">{data.description}</div>
-          </CardDescription>
-        </CardHeader>
-      </div>
-
-      <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-1 flex-wrap gap-2">
-              {data.tags &&
-                data.tags.length > 0 &&
-                data.tags.map((tag, index) => (
-                  <Badge
-                    key={index}
-                    variant="outline"
-                    size="xq"
-                    className="text-muted-foreground"
+                {onDelete && data?.metadata === undefined && (
+                  <DeleteConfirmationModal
+                    onConfirm={() => {
+                      onDelete();
+                    }}
                   >
-                    {tag.name}
-                  </Badge>
-                ))}
+                    <IconComponent
+                      name="Trash2"
+                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                    />
+                  </DeleteConfirmationModal>
+                )}
+              </CardTitle>
             </div>
-            {data.liked_by_count != undefined && (
-              <div className="flex gap-0.5">
-                {onDelete && data?.metadata !== undefined ? (
-                  <ShadTooltip
-                    content={
-                      authorized ? "Delete" : "Please review your API key."
-                    }
-                  >
-                    <DeleteConfirmationModal
-                      onConfirm={() => {
-                        onDelete();
-                      }}
+            {data.user_created && data.user_created.username && (
+              <span className="text-sm text-primary">
+                by <b>{data.user_created.username}</b>
+                {data.last_tested_version && (
+                  <>
+                    {" "}
+                    |{" "}
+                    <span className="text-xs">
+                      {" "}
+                      ⛓︎ v{data.last_tested_version}
+                    </span>
+                  </>
+                )}
+              </span>
+            )}
+
+            <CardDescription className="pb-2 pt-2">
+              <div className="truncate-doubleline">{data.description}</div>
+            </CardDescription>
+          </CardHeader>
+        </div>
+
+        <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-1 flex-wrap gap-2">
+                {data.tags &&
+                  data.tags.length > 0 &&
+                  data.tags.map((tag, index) => (
+                    <Badge
+                      key={index}
+                      variant="outline"
+                      size="xq"
+                      className="text-muted-foreground"
+                    >
+                      {tag.name}
+                    </Badge>
+                  ))}
+              </div>
+              {data.liked_by_count != undefined && (
+                <div className="flex gap-0.5">
+                  {onDelete && data?.metadata !== undefined ? (
+                    <ShadTooltip
+                      content={
+                        authorized ? "Delete" : "Please review your API key."
+                      }
+                    >
+                      <DeleteConfirmationModal
+                        onConfirm={() => {
+                          onDelete();
+                        }}
+                      >
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className={
+                            "whitespace-nowrap" +
+                            (!authorized ? " cursor-not-allowed" : "")
+                          }
+                        >
+                          <IconComponent
+                            name="Trash2"
+                            className={cn(
+                              "h-5 w-5",
+                              !authorized ? " text-ring" : ""
+                            )}
+                          />
+                        </Button>
+                      </DeleteConfirmationModal>
+                    </ShadTooltip>
+                  ) : (
+                    <ShadTooltip
+                      content={
+                        authorized ? "Like" : "Please review your API key."
+                      }
                     >
                       <Button
+                        disabled={loadingLike}
                         variant="ghost"
                         size="icon"
                         className={
                           "whitespace-nowrap" +
                           (!authorized ? " cursor-not-allowed" : "")
                         }
+                        onClick={() => {
+                          if (!authorized) {
+                            return;
+                          }
+                          handleLike();
+                        }}
+                        data-testid={`like-${data.name}`}
                       >
                         <IconComponent
-                          name="Trash2"
+                          name="Heart"
                           className={cn(
                             "h-5 w-5",
+                            liked_by_user
+                              ? "fill-destructive stroke-destructive"
+                              : "",
                             !authorized ? " text-ring" : ""
                           )}
                         />
                       </Button>
-                    </DeleteConfirmationModal>
-                  </ShadTooltip>
-                ) : (
+                    </ShadTooltip>
+                  )}
                   <ShadTooltip
                     content={
-                      authorized ? "Like" : "Please review your API key."
+                      authorized
+                        ? isStore
+                          ? "Download"
+                          : "Install Locally"
+                        : "Please review your API key."
                     }
                   >
                     <Button
-                      disabled={loadingLike}
+                      disabled={loading}
                       variant="ghost"
                       size="icon"
                       className={
                         "whitespace-nowrap" +
-                        (!authorized ? " cursor-not-allowed" : "")
+                        (!authorized ? " cursor-not-allowed" : "") +
+                        (!loading ? " p-0.5" : "")
                       }
                       onClick={() => {
-                        if (!authorized) {
+                        if (loading || !authorized) {
                           return;
                         }
-                        handleLike();
+                        handleInstall();
                       }}
-                      data-testid={`like-${data.name}`}
+                      data-testid={`install-${data.name}`}
                     >
                       <IconComponent
-                        name="Heart"
+                        name={
+                          loading ? "Loader2" : isStore ? "Download" : "Plus"
+                        }
                         className={cn(
-                          "h-5 w-5",
-                          liked_by_user
-                            ? "fill-destructive stroke-destructive"
-                            : "",
+                          loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
                           !authorized ? " text-ring" : ""
                         )}
                       />
                     </Button>
                   </ShadTooltip>
-                )}
-                <ShadTooltip
-                  content={
-                    authorized
-                      ? isStore
-                        ? "Download"
-                        : "Install Locally"
-                      : "Please review your API key."
-                  }
-                >
-                  <Button
-                    disabled={loading}
-                    variant="ghost"
-                    size="icon"
-                    className={
-                      "whitespace-nowrap" +
-                      (!authorized ? " cursor-not-allowed" : "") +
-                      (!loading ? " p-0.5" : "")
-                    }
-                    onClick={() => {
-                      if (loading || !authorized) {
-                        return;
-                      }
-                      handleInstall();
-                    }}
-                    data-testid={`install-${data.name}`}
-                  >
-                    <IconComponent
-                      name={loading ? "Loader2" : isStore ? "Download" : "Plus"}
-                      className={cn(
-                        loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
-                        !authorized ? " text-ring" : ""
-                      )}
-                    />
-                  </Button>
-                </ShadTooltip>
-              </div>
-            )}
-            {button && button}
-            {playground &&
-              <Button
-                disabled={loadingPlayground}
-                key={data.id}
-                tabIndex={-1}
-                variant="outline"
-                size="sm"
-                className="whitespace-nowrap "
-                data-testid={
-                  "playground-flow-button-" + data.id
-                }
-                onClick={() => {
-                  setLoadingPlayground(true);
-                  if (getFlowById(data.id)) {
-                    setCurrentFlowId(data.id);
-                    setOpenPlayground(true);
-                    setLoadingPlayground(false);
-                  }
-                  else {
-                    getFlowData().then((res) => {
-                      setCurrentFlow(res);
+                </div>
+              )}
+              {button && button}
+              {playground && (
+                <Button
+                  disabled={loadingPlayground}
+                  key={data.id}
+                  tabIndex={-1}
+                  variant="outline"
+                  size="sm"
+                  className="whitespace-nowrap "
+                  data-testid={"playground-flow-button-" + data.id}
+                  onClick={() => {
+                    setLoadingPlayground(true);
+                    if (getFlowById(data.id)) {
+                      setCurrentFlowId(data.id);
                       setOpenPlayground(true);
                       setLoadingPlayground(false);
-                    });
-
-                  }
-                }}
-              >
-                {!loadingPlayground ?
-                  <>
-                    <IconComponent
-                      name="ExternalLink"
-                      className="main-page-nav-button select-none"
-                    />
-                    Playground
-                  </>:
-                  <Loading />
-              }
-                {openPlayground && < IOModal cleanOnClose={true} open={openPlayground} setOpen={setOpenPlayground}>
-                  <></>
-                </IOModal>}
-              </Button>
-            }
+                    } else {
+                      getFlowData().then((res) => {
+                        setCurrentFlow(res);
+                        setOpenPlayground(true);
+                        setLoadingPlayground(false);
+                      });
+                    }
+                  }}
+                >
+                  {!loadingPlayground ? (
+                    <>
+                      <IconComponent
+                        name="ExternalLink"
+                        className="main-page-nav-button select-none"
+                      />
+                      Playground
+                    </>
+                  ) : (
+                    <Loading />
+                  )}
+                </Button>
+              )}
+            </div>
           </div>
-        </div>
-      </CardFooter>
-    </Card >
+        </CardFooter>
+      </Card>
+
+      {openPlayground && (
+        <IOModal
+          cleanOnClose={true}
+          open={openPlayground}
+          setOpen={setOpenPlayground}
+        >
+          <></>
+        </IOModal>
+      )}
+    </>
   );
 }
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 86c9d6591..463d7ce1e 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -31,10 +31,8 @@ export default function IOModal({
   open,
   setOpen,
   disable,
-  cleanOnClose=false,
 }: IOModalPropsType): JSX.Element {
   const allNodes = useFlowStore((state) => state.nodes);
-  const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool);
   const inputs = useFlowStore((state) => state.inputs).filter(
     (input) => input.type !== "ChatInput"
   );
@@ -85,12 +83,6 @@ export default function IOModal({
     return updateVerticesOrder(currentFlow!.id, null);
   }
 
-  // useEffect(() => {
-  //   if (open) {
-  //     updateVertices();
-  //   }
-  // }, [open, currentFlow]);
-
   async function sendMessage(count = 1): Promise<void> {
     if (isBuilding) return;
     setIsBuilding(true);
@@ -129,13 +121,6 @@ export default function IOModal({
       open={open}
       setOpen={setOpen}
       disable={disable}
-      onChangeOpenModal={(open)=>{
-        if(!open && cleanOnClose){
-          console.log("cleaning flow pool") 
-          cleanFlowPool();
-        }
-      
-      }}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
diff --git a/src/frontend/src/pages/Playground/index.tsx b/src/frontend/src/pages/Playground/index.tsx
index 170690581..9d538494b 100644
--- a/src/frontend/src/pages/Playground/index.tsx
+++ b/src/frontend/src/pages/Playground/index.tsx
@@ -27,6 +27,7 @@ export default function PlaygroundPage() {
 
     // Set flow tab id
     useEffect(() => {
+        console.log("id", id);
         if (getFlowById(id!)) {
             setCurrentFlowId(id!);
         }
@@ -44,6 +45,11 @@ export default function PlaygroundPage() {
             cleanFlowPool();
             setLoading(false);
         }
+        return () => {
+            setNodes([], true);
+            setEdges([], true);
+            cleanFlowPool();
+        };
     }, [currentFlow]);
 
 

From 6b72b41b866f0baa5ad4e4012694fdb520b0e306 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 15:05:03 +0200
Subject: [PATCH 066/142] Fixed playground name and collection card

---
 .../src/components/cardComponent/index.tsx    | 393 +++++++++---------
 src/frontend/src/modals/IOModal/index.tsx     |   4 +-
 .../MainPage/components/components/index.tsx  |  27 +-
 3 files changed, 200 insertions(+), 224 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index b6c7af538..b1a712667 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import IOModal from "../../modals/IOModal";
+import IOModal from "../../modals/IOModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -27,12 +28,15 @@ export default function CollectionCardComponent({
   authorized = true,
   disabled = false,
   button,
+  onClick,
   onDelete,
   playground,
+  playground,
 }: {
   data: storeComponent;
   authorized?: boolean;
   disabled?: boolean;
+  onClick?: () => void;
   button?: JSX.Element;
   playground?: boolean;
   onDelete?: () => void;
@@ -165,72 +169,67 @@ export default function CollectionCardComponent({
   }
 
   return (
-    <>
-      <Card
-        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" : ""
-        )}
-      >
-        <div>
-          <CardHeader>
-            <div>
-              <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-                <IconComponent
-                  className={cn(
-                    "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"
-                  )}
-                  name={data.is_component ? "ToyBrick" : "Group"}
-                />
-                <ShadTooltip content={data.name}>
-                  <div className="w-full truncate">{data.name}</div>
-                </ShadTooltip>
-                {data?.metadata !== undefined && (
-                  <div className="flex gap-3">
-                    {data.private && (
-                      <ShadTooltip content="Private">
-                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                          <IconComponent name="Lock" className="h-4 w-4" />
-                        </span>
-                      </ShadTooltip>
-                    )}
-                    {!data.is_component && (
-                      <ShadTooltip content="Components">
-                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                          <IconComponent name="ToyBrick" className="h-4 w-4" />
-                          <span data-testid={`total-${data.name}`}>
-                            {data?.metadata?.total ?? 0}
-                          </span>
-                        </span>
-                      </ShadTooltip>
-                    )}
-                    <ShadTooltip content="Likes">
-                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent
-                          name="Heart"
-                          className={cn("h-4 w-4 ")}
-                        />
-                        <span data-testid={`likes-${data.name}`}>
-                          {likes_count ?? 0}
-                        </span>
-                      </span>
-                    </ShadTooltip>
-                    <ShadTooltip content="Downloads">
-                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent
-                          name="DownloadCloud"
-                          className="h-4 w-4"
-                        />
-                        <span data-testid={`downloads-${data.name}`}>
-                          {downloads_count ?? 0}
-                        </span>
-                      </span>
-                    </ShadTooltip>
-                  </div>
+    <Card
+      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={onClick}
+    >
+      <div>
+        <CardHeader>
+          <div>
+            <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+              <IconComponent
+                className={cn(
+                  "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"
                 )}
+                name={data.is_component ? "ToyBrick" : "Group"}
+              />
+              <ShadTooltip content={data.name}>
+                <div className="w-full truncate">{data.name}</div>
+              </ShadTooltip>
+              {data?.metadata !== undefined && (
+                <div className="flex gap-3">
+                  {data.private && (
+                    <ShadTooltip content="Private">
+                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                        <IconComponent name="Lock" className="h-4 w-4" />
+                      </span>
+                    </ShadTooltip>
+                  )}
+                  {!data.is_component && (
+                    <ShadTooltip content="Components">
+                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                        <IconComponent name="ToyBrick" className="h-4 w-4" />
+                        <span data-testid={`total-${data.name}`}>
+                          {data?.metadata?.total ?? 0}
+                        </span>
+                      </span>
+                    </ShadTooltip>
+                  )}
+                  <ShadTooltip content="Likes">
+                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
+                      <span data-testid={`likes-${data.name}`}>
+                        {likes_count ?? 0}
+                      </span>
+                    </span>
+                  </ShadTooltip>
+                  <ShadTooltip content="Downloads">
+                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <IconComponent name="DownloadCloud" className="h-4 w-4" />
+                      <span data-testid={`downloads-${data.name}`}>
+                        {downloads_count ?? 0}
+                      </span>
+                    </span>
+                  </ShadTooltip>
+                </div>
+              )}
 
                 {onDelete && data?.metadata === undefined && (
                   <DeleteConfirmationModal
@@ -268,180 +267,176 @@ export default function CollectionCardComponent({
           </CardHeader>
         </div>
 
-        <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-1 flex-wrap gap-2">
-                {data.tags &&
-                  data.tags.length > 0 &&
-                  data.tags.map((tag, index) => (
-                    <Badge
-                      key={index}
-                      variant="outline"
-                      size="xq"
-                      className="text-muted-foreground"
-                    >
-                      {tag.name}
-                    </Badge>
-                  ))}
-              </div>
-              {data.liked_by_count != undefined && (
-                <div className="flex gap-0.5">
-                  {onDelete && data?.metadata !== undefined ? (
-                    <ShadTooltip
-                      content={
-                        authorized ? "Delete" : "Please review your API key."
-                      }
-                    >
-                      <DeleteConfirmationModal
-                        onConfirm={() => {
-                          onDelete();
-                        }}
-                      >
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className={
-                            "whitespace-nowrap" +
-                            (!authorized ? " cursor-not-allowed" : "")
-                          }
-                        >
-                          <IconComponent
-                            name="Trash2"
-                            className={cn(
-                              "h-5 w-5",
-                              !authorized ? " text-ring" : ""
-                            )}
-                          />
-                        </Button>
-                      </DeleteConfirmationModal>
-                    </ShadTooltip>
-                  ) : (
-                    <ShadTooltip
-                      content={
-                        authorized ? "Like" : "Please review your API key."
-                      }
+      <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-1 flex-wrap gap-2">
+              {data.tags &&
+                data.tags.length > 0 &&
+                data.tags.map((tag, index) => (
+                  <Badge
+                    key={index}
+                    variant="outline"
+                    size="xq"
+                    className="text-muted-foreground"
+                  >
+                    {tag.name}
+                  </Badge>
+                ))}
+            </div>
+            {data.liked_by_count != undefined && (
+              <div className="flex gap-0.5">
+                {onDelete && data?.metadata !== undefined ? (
+                  <ShadTooltip
+                    content={
+                      authorized ? "Delete" : "Please review your API key."
+                    }
+                  >
+                    <DeleteConfirmationModal
+                      onConfirm={() => {
+                        onDelete();
+                      }}
                     >
                       <Button
-                        disabled={loadingLike}
                         variant="ghost"
                         size="icon"
                         className={
                           "whitespace-nowrap" +
                           (!authorized ? " cursor-not-allowed" : "")
                         }
-                        onClick={() => {
-                          if (!authorized) {
-                            return;
-                          }
-                          handleLike();
-                        }}
-                        data-testid={`like-${data.name}`}
                       >
                         <IconComponent
-                          name="Heart"
+                          name="Trash2"
                           className={cn(
                             "h-5 w-5",
-                            liked_by_user
-                              ? "fill-destructive stroke-destructive"
-                              : "",
                             !authorized ? " text-ring" : ""
                           )}
                         />
                       </Button>
-                    </ShadTooltip>
-                  )}
+                    </DeleteConfirmationModal>
+                  </ShadTooltip>
+                ) : (
                   <ShadTooltip
                     content={
-                      authorized
-                        ? isStore
-                          ? "Download"
-                          : "Install Locally"
-                        : "Please review your API key."
+                      authorized ? "Like" : "Please review your API key."
                     }
                   >
                     <Button
-                      disabled={loading}
+                      disabled={loadingLike}
                       variant="ghost"
                       size="icon"
                       className={
                         "whitespace-nowrap" +
-                        (!authorized ? " cursor-not-allowed" : "") +
-                        (!loading ? " p-0.5" : "")
+                        (!authorized ? " cursor-not-allowed" : "")
                       }
                       onClick={() => {
-                        if (loading || !authorized) {
+                        if (!authorized) {
                           return;
                         }
-                        handleInstall();
+                        handleLike();
                       }}
-                      data-testid={`install-${data.name}`}
+                      data-testid={`like-${data.name}`}
                     >
                       <IconComponent
-                        name={
-                          loading ? "Loader2" : isStore ? "Download" : "Plus"
-                        }
+                        name="Heart"
                         className={cn(
-                          loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
+                          "h-5 w-5",
+                          liked_by_user
+                            ? "fill-destructive stroke-destructive"
+                            : "",
                           !authorized ? " text-ring" : ""
                         )}
                       />
                     </Button>
                   </ShadTooltip>
-                </div>
-              )}
-              {button && button}
-              {playground && (
-                <Button
-                  disabled={loadingPlayground}
-                  key={data.id}
-                  tabIndex={-1}
-                  variant="outline"
-                  size="sm"
-                  className="whitespace-nowrap "
-                  data-testid={"playground-flow-button-" + data.id}
-                  onClick={() => {
-                    setLoadingPlayground(true);
-                    if (getFlowById(data.id)) {
-                      setCurrentFlowId(data.id);
+                )}
+                <ShadTooltip
+                  content={
+                    authorized
+                      ? isStore
+                        ? "Download"
+                        : "Install Locally"
+                      : "Please review your API key."
+                  }
+                >
+                  <Button
+                    disabled={loading}
+                    variant="ghost"
+                    size="icon"
+                    className={
+                      "whitespace-nowrap" +
+                      (!authorized ? " cursor-not-allowed" : "") +
+                      (!loading ? " p-0.5" : "")
+                    }
+                    onClick={() => {
+                      if (loading || !authorized) {
+                        return;
+                      }
+                      handleInstall();
+                    }}
+                    data-testid={`install-${data.name}`}
+                  >
+                    <IconComponent
+                      name={loading ? "Loader2" : isStore ? "Download" : "Plus"}
+                      className={cn(
+                        loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
+                        !authorized ? " text-ring" : ""
+                      )}
+                    />
+                  </Button>
+                </ShadTooltip>
+              </div>
+            )}
+            {button && button}
+            {playground && (
+              <Button
+                disabled={loadingPlayground}
+                key={data.id}
+                tabIndex={-1}
+                variant="outline"
+                size="sm"
+                className="whitespace-nowrap gap-2"
+                data-testid={"playground-flow-button-" + data.id}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setLoadingPlayground(true);
+                  if (getFlowById(data.id)) {
+                    setCurrentFlowId(data.id);
+                    setOpenPlayground(true);
+                    setLoadingPlayground(false);
+                  } else {
+                    getFlowData().then((res) => {
+                      setCurrentFlow(res);
                       setOpenPlayground(true);
                       setLoadingPlayground(false);
-                    } else {
-                      getFlowData().then((res) => {
-                        setCurrentFlow(res);
-                        setOpenPlayground(true);
-                        setLoadingPlayground(false);
-                      });
-                    }
-                  }}
-                >
-                  {!loadingPlayground ? (
-                    <>
-                      <IconComponent
-                        name="ExternalLink"
-                        className="main-page-nav-button select-none"
-                      />
-                      Playground
-                    </>
-                  ) : (
-                    <Loading />
-                  )}
-                </Button>
-              )}
-            </div>
+                    });
+                  }
+                }}
+              >
+                {!loadingPlayground ? (
+                  <IconComponent
+                    name="Zap"
+                    className="h-4 w-4 select-none fill-current text-medium-indigo"
+                  />
+                ) : (
+                  <Loading className="h-4 w-4 text-medium-indigo" />
+                )}
+                Playground
+              </Button>
+            )}
+            {openPlayground && (
+              <IOModal
+                cleanOnClose={true}
+                open={openPlayground}
+                setOpen={setOpenPlayground}
+              >
+                <></>
+              </IOModal>
+            )}
           </div>
-        </CardFooter>
-      </Card>
-
-      {openPlayground && (
-        <IOModal
-          cleanOnClose={true}
-          open={openPlayground}
-          setOpen={setOpenPlayground}
-        >
-          <></>
-        </IOModal>
-      )}
-    </>
+        </div>
+      </CardFooter>
+    </Card>
   );
 }
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 463d7ce1e..93fdd5d41 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -126,9 +126,9 @@ export default function IOModal({
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
       <BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>
         <div className="flex items-center">
-          <span className="pr-2">Interaction Panel</span>
+          <span className="pr-2">Playground</span>
           <IconComponent
-            name="prompts"
+            name="Zap"
             className="h-6 w-6 pl-1 text-foreground"
             aria-hidden="true"
           />
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index bfe11b7ac..c11127335 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -146,30 +146,11 @@ export default function ComponentsComponent({
                     }}
                     key={idx}
                     data={item}
-                    disabled={isLoading}
-                    button={
-                      !is_component ? (
-                        <Link to={"/flow/" + item.id}>
-                          <Button
-                            tabIndex={-1}
-                            variant="outline"
-                            size="sm"
-                            className="whitespace-nowrap "
-                            data-testid={
-                              "edit-flow-button-" + item.id + "-" + idx
-                            }
-                          >
-                            <IconComponent
-                              name="ExternalLink"
-                              className="main-page-nav-button select-none"
-                            />
-                            Edit Flow
-                          </Button>
-                        </Link>
-                      ) : (
-                        <></>
-                      )
+                    data-testid={
+                      "edit-flow-button-" + item.id + "-" + idx
                     }
+                    onClick={!is_component ? () => {navigate("/flow/" + item.id);} : undefined}
+                    disabled={isLoading}
                     playground={!is_component}
                   />
                 ))

From 74d0e2ed1078a4d45d781f02f0ef8d82291775d3 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 15:05:31 +0200
Subject: [PATCH 067/142] Fixed name of Run button

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

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 66ff2b609..609c6dd0c 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -95,7 +95,7 @@ export default function FlowToolbar(): JSX.Element {
                       name="Zap"
                       className={"message-button-icon h-5 w-5 transition-all"}
                     />
-                    Run
+                    Playground
                   </div>
                 </IOModal>
               ) : (

From f403d8e8b4b1efd1e86205432f6f03c037cd91bc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 15:07:52 +0200
Subject: [PATCH 068/142] Fixed merge bug

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

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index b1a712667..a6a7eecb9 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import IOModal from "../../modals/IOModal";
-import IOModal from "../../modals/IOModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";

From b21b45fd6733a131acc39be0e378f0f060522cdc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 15:09:46 +0200
Subject: [PATCH 069/142] Fixed merge problems

---
 src/frontend/src/components/cardComponent/index.tsx | 1 -
 src/frontend/src/modals/StoreApiKeyModal/index.tsx  | 4 +---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index a6a7eecb9..b8a710f6b 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -30,7 +30,6 @@ export default function CollectionCardComponent({
   onClick,
   onDelete,
   playground,
-  playground,
 }: {
   data: storeComponent;
   authorized?: boolean;
diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index f25dc627d..cdd2419a5 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -86,6 +86,7 @@ export default function StoreApiKeyModal({
         <Form.Root
           onSubmit={(event) => {
             event.preventDefault();
+            handleSaveKey();
           }}
         >
           <div className="grid gap-5">
@@ -131,9 +132,6 @@ export default function StoreApiKeyModal({
                 <Button
                   data-testid="api-key-save-button-store"
                   className="mt-8"
-                  onClick={() => {
-                    handleSaveKey();
-                  }}
                 >
                   Save
                 </Button>

From 89517181c270588dc0771e5c582ceba822dffd42 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 15:25:06 +0200
Subject: [PATCH 070/142] Fixed playground button at store

---
 .../src/components/cardComponent/index.tsx    | 124 ++++++++++++------
 1 file changed, 86 insertions(+), 38 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index b8a710f6b..9148e6515 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -76,11 +76,10 @@ export default function CollectionCardComponent({
 
   useEffect(() => {
     if (currentFlowId && playground) {
-      if(openPlayground){
+      if (openPlayground) {
         setNodes(currentFlow?.data?.nodes ?? [], true);
         setEdges(currentFlow?.data?.edges ?? [], true);
-      }
-      else{
+      } else {
         setNodes([], true);
         setEdges([], true);
         cleanFlowPool();
@@ -229,41 +228,41 @@ export default function CollectionCardComponent({
                 </div>
               )}
 
-                {onDelete && data?.metadata === undefined && (
-                  <DeleteConfirmationModal
-                    onConfirm={() => {
-                      onDelete();
-                    }}
-                  >
-                    <IconComponent
-                      name="Trash2"
-                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
-                    />
-                  </DeleteConfirmationModal>
-                )}
-              </CardTitle>
-            </div>
-            {data.user_created && data.user_created.username && (
-              <span className="text-sm text-primary">
-                by <b>{data.user_created.username}</b>
-                {data.last_tested_version && (
-                  <>
+              {onDelete && data?.metadata === undefined && (
+                <DeleteConfirmationModal
+                  onConfirm={() => {
+                    onDelete();
+                  }}
+                >
+                  <IconComponent
+                    name="Trash2"
+                    className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                  />
+                </DeleteConfirmationModal>
+              )}
+            </CardTitle>
+          </div>
+          {data.user_created && data.user_created.username && (
+            <span className="text-sm text-primary">
+              by <b>{data.user_created.username}</b>
+              {data.last_tested_version && (
+                <>
+                  {" "}
+                  |{" "}
+                  <span className="text-xs">
                     {" "}
-                    |{" "}
-                    <span className="text-xs">
-                      {" "}
-                      ⛓︎ v{data.last_tested_version}
-                    </span>
-                  </>
-                )}
-              </span>
-            )}
+                    ⛓︎ v{data.last_tested_version}
+                  </span>
+                </>
+              )}
+            </span>
+          )}
 
-            <CardDescription className="pb-2 pt-2">
-              <div className="truncate-doubleline">{data.description}</div>
-            </CardDescription>
-          </CardHeader>
-        </div>
+          <CardDescription className="pb-2 pt-2">
+            <div className="truncate-doubleline">{data.description}</div>
+          </CardDescription>
+        </CardHeader>
+      </div>
 
       <CardFooter>
         <div className="flex w-full items-center justify-between gap-2">
@@ -284,6 +283,55 @@ export default function CollectionCardComponent({
             </div>
             {data.liked_by_count != undefined && (
               <div className="flex gap-0.5">
+                {playground && data?.metadata !== undefined && (
+                  <ShadTooltip
+                    content={
+                      authorized ? "Playground" : "Please review your API key."
+                    }
+                  >
+                    <Button
+                      disabled={loadingLike}
+                      variant="ghost"
+                      size="icon"
+                      className={
+                        "whitespace-nowrap" +
+                        (!authorized ? " cursor-not-allowed" : "")
+                      }
+                      onClick={(e) => {
+                        if (!authorized) {
+                          return;
+                        }
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setLoadingPlayground(true);
+                        if (getFlowById(data.id)) {
+                          setCurrentFlowId(data.id);
+                          setOpenPlayground(true);
+                          setLoadingPlayground(false);
+                        } else {
+                          getFlowData().then((res) => {
+                            setCurrentFlow(res);
+                            setOpenPlayground(true);
+                            setLoadingPlayground(false);
+                          });
+                        }
+                      }}
+                      data-testid={`like-${data.name}`}
+                    >
+                      {!loadingPlayground ? (
+                        <IconComponent
+                          name="Zap"
+                          className={cn(
+                            "h-5 w-5 select-none fill-current text-medium-indigo",
+                            !authorized ? " text-ring" : ""
+                          )}
+                        />
+                      ) : (
+                        <Loading className="h-4 w-4 select-none text-medium-indigo" />
+                      )}
+                    </Button>
+                  </ShadTooltip>
+                )}
                 {onDelete && data?.metadata !== undefined ? (
                   <ShadTooltip
                     content={
@@ -386,14 +434,14 @@ export default function CollectionCardComponent({
               </div>
             )}
             {button && button}
-            {playground && (
+            {playground && data?.metadata === undefined && (
               <Button
                 disabled={loadingPlayground}
                 key={data.id}
                 tabIndex={-1}
                 variant="outline"
                 size="sm"
-                className="whitespace-nowrap gap-2"
+                className="gap-2 whitespace-nowrap"
                 data-testid={"playground-flow-button-" + data.id}
                 onClick={(e) => {
                   e.preventDefault();

From a556f686e21f842e379b6f284b84bc97067eda29 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 16:46:19 +0200
Subject: [PATCH 071/142] Added multiple inputs possibility to InputComponent

---
 .../addNewVariableButton.tsx                  |  9 ++++
 .../src/components/inputComponent/index.tsx   | 42 ++++++++++++++-----
 src/frontend/src/types/components/index.ts    |  2 +
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 0c83eefff..6ab25b026 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -18,6 +18,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
   const [type, setType] = useState("");
+  const [fields, setFields] = useState<string[]>([]);
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
@@ -91,6 +92,14 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             placeholder="Insert a value for the variable..."
             className="w-full resize-none custom-scroll"
           />
+          <Label>Apply To Fields (optional)</Label>
+          <InputComponent
+            setSelectedOptions={(value) => setFields(value)}
+            selectedOptions={fields}
+            password={false}
+            options={Array.from(componentFields)}
+            placeholder="Choose a type for the variable..."
+          ></InputComponent>
         </div>
       </BaseModal.Content>
       <BaseModal.Footer>
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index bd7f852ab..4f3a207cc 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -33,6 +33,8 @@ export default function InputComponent({
   optionsIcon = "ChevronsUpDown",
   selectedOption,
   setSelectedOption,
+  selectedOptions = [],
+  setSelectedOptions,
   options = [],
   optionsPlaceholder = "Search options...",
   optionsButton,
@@ -101,13 +103,18 @@ export default function InputComponent({
                 value={
                   (selectedOption !== "" || !onChange) && setSelectedOption
                     ? selectedOption
+                    : (selectedOptions?.length !== 0 || !onChange) &&
+                      setSelectedOptions
+                    ? selectedOptions?.join(", ")
                     : value
                 }
                 autoFocus={autoFocus}
                 disabled={disabled}
                 onClick={() => {
-                  (selectedOption !== "" || !onChange) &&
-                    setSelectedOption &&
+                  (((selectedOption !== "" || !onChange) &&
+                    setSelectedOption) ||
+                    ((selectedOptions?.length !== 0 || !onChange) &&
+                      setSelectedOptions)) &&
                     setShowOptions(true);
                 }}
                 required={required}
@@ -119,9 +126,11 @@ export default function InputComponent({
                     ? " text-clip password "
                     : "",
                   editNode ? " input-edit-node " : "",
-                  password && setSelectedOption ? "pr-[62.9px]" : "",
-                  (!password && setSelectedOption) ||
-                    (password && !setSelectedOption)
+                  password && (setSelectedOption || setSelectedOptions)
+                    ? "pr-[62.9px]"
+                    : "",
+                  (!password && (setSelectedOption || setSelectedOptions)) ||
+                    (password && !(setSelectedOption || setSelectedOptions))
                     ? "pr-8"
                     : "",
 
@@ -184,7 +193,15 @@ export default function InputComponent({
                                 ? ""
                                 : currentValue
                             );
-                          setShowOptions(false);
+                          setSelectedOptions &&
+                            setSelectedOptions(
+                              selectedOptions?.includes(currentValue)
+                                ? selectedOptions.filter(
+                                    (item) => item !== currentValue
+                                  )
+                                : [...selectedOptions, currentValue]
+                            );
+                          !setSelectedOptions && setShowOptions(false);
                         }}
                       >
                         <div className="group flex w-full items-center justify-between">
@@ -192,7 +209,8 @@ export default function InputComponent({
                             <div
                               className={cn(
                                 "relative mr-2 h-4 w-4",
-                                selectedOption === option
+                                selectedOption === option ||
+                                  selectedOptions?.includes(option)
                                   ? "opacity-100"
                                   : "opacity-0"
                               )}
@@ -228,12 +246,16 @@ export default function InputComponent({
           <div
             className={cn(
               "pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
-              (selectedOption !== "" || !onChange) && setSelectedOption
+              ((selectedOption !== "" || !onChange) && setSelectedOption) ||
+                ((selectedOptions?.length !== 0 || !onChange) &&
+                  setSelectedOptions)
                 ? ""
                 : "hidden"
             )}
             onClick={
-              (selectedOption !== "" || !onChange) && setSelectedOption
+              ((selectedOption !== "" || !onChange) && setSelectedOption) ||
+              ((selectedOptions?.length !== 0 || !onChange) &&
+                setSelectedOptions)
                 ? (e) => {
                     setShowOptions((old) => !old);
                     e.preventDefault();
@@ -245,7 +267,7 @@ export default function InputComponent({
         </>
       )}
 
-      {setSelectedOption && (
+      {(setSelectedOption || setSelectedOptions) && (
         <span
           className={cn(
             password && selectedOption === "" ? "right-8" : "right-0",
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 353443572..5bcdc911f 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -28,6 +28,8 @@ export type InputComponentType = {
   optionButton?: (option: string) => ReactElement;
   selectedOption?: string;
   setSelectedOption?: (value: string) => void;
+  selectedOptions?: string[];
+  setSelectedOptions?: (value: string[]) => void;
 };
 export type ToggleComponentType = {
   enabled: boolean;

From e773227e4a94f86caf6ca807482d77519a09e5e2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 16:49:26 +0200
Subject: [PATCH 072/142] Added fields to request for creating new variable

---
 .../addNewVariableButtonComponent/addNewVariableButton.tsx  | 5 +++--
 src/frontend/src/stores/globalVariables.ts                  | 4 ++--
 src/frontend/src/types/zustand/globalVariables/index.ts     | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 6ab25b026..aae36775d 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -26,15 +26,16 @@ export default function AddNewVariableButton({ children }): JSX.Element {
     (state) => state.addGlobalVariable
   );
   function handleSaveVariable() {
-    let data: { name: string; value: string; type?: string } = {
+    let data: { name: string; value: string; type?: string; default_fields?: string[] } = {
       name: key,
       type,
       value,
+      default_fields: fields
     };
     registerGlobalVariable(data)
       .then((res) => {
         const { name, id, type } = res.data;
-        addGlobalVariable(name, id, type);
+        addGlobalVariable(name, id, type, fields);
         setKey("");
         setValue("");
         setType("");
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index d9a326b08..ff0514042 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -21,8 +21,8 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(variables),
       });
     },
-    addGlobalVariable: (name, id, type) => {
-      const data = { id, type };
+    addGlobalVariable: (name, id, type, default_fields) => {
+      const data = { id, type, default_fields };
       const newVariables = { ...get().globalVariables, [name]: data };
       set({
         globalVariables: newVariables,
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index c5f6c24d2..d34973a17 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -1,10 +1,10 @@
 export type GlobalVariablesStore = {
   globalVariablesEntries: Array<string>;
-  globalVariables: { [name: string]: { id: string; type?: string } };
+  globalVariables: { [name: string]: { id: string; type?: string, default_fields?: string[] } };
   setGlobalVariables: (variables: {
-    [name: string]: { id: string; type?: string };
+    [name: string]: { id: string; type?: string, default_fields?: string[]};
   }) => void;
-  addGlobalVariable: (name: string, id: string, type?: string) => void;
+  addGlobalVariable: (name: string, id: string, type?: string, default_fields?: string[]) => void;
   removeGlobalVariable: (name: string) => void;
   getVariableId: (name: string) => string | undefined;
   unavaliableFields: Set<string>;

From 252641ca6cb9628724f009b9884a0312bf6404c2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 16:54:27 +0200
Subject: [PATCH 073/142] Fixed shortcuts page to display two different
 categories

---
 .../pages/ShortcutsPage/index.tsx             | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index bb7131382..1dac8d095 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -11,13 +11,13 @@ import {
 } from "../../../../components/ui/card";
 
 export default function ShortcutsPage() {
-  const advancedShortcut = "Ctrl + shift + A";
-  const minizmizeShortcut = "Ctrl + shift + Q";
-  const codeShortcut = "Ctrl + shift + C";
+  const advancedShortcut = "Ctrl + Shift + A";
+  const minizmizeShortcut = "Ctrl + Shift + Q";
+  const codeShortcut = "Ctrl + Shift + C";
   const copyShortcut = "Ctrl + C";
   const duplicateShortcut = "Ctrl + D";
-  const shareShortcut = "Ctrl + shift + S";
-  const docsShortcut = "Ctrl + shift + D";
+  const shareShortcut = "Ctrl + Shift + S";
+  const docsShortcut = "Ctrl + Shift + D";
   const saveShortcut = "Ctrl + S";
   const deleteShortcut = "Backspace";
   const interactionShortcut = "Ctrl + K";
@@ -34,9 +34,9 @@ export default function ShortcutsPage() {
     },
   ]);
 
-  const [rowData, setRowData] = useState([
+  const [nodesRowData, setNodesRowData] = useState([
     {
-      name: "Open node advanced settings",
+      name: "Advanced Settings",
       shortcut: advancedShortcut,
     },
     {
@@ -44,7 +44,7 @@ export default function ShortcutsPage() {
       shortcut: minizmizeShortcut,
     },
     {
-      name: "Open Code modal",
+      name: "Code",
       shortcut: codeShortcut,
     },
     {
@@ -60,7 +60,7 @@ export default function ShortcutsPage() {
       shortcut: shareShortcut,
     },
     {
-      name: "Open docs",
+      name: "Docs",
       shortcut: docsShortcut,
     },
     {
@@ -71,8 +71,11 @@ export default function ShortcutsPage() {
       name: "Delete",
       shortcut: deleteShortcut,
     },
+  ]);
+
+  const [flowRowData, setFlowRowData] = useState([
     {
-      name: "Open interaction panel",
+      name: "Open Playground",
       shortcut: interactionShortcut,
     },
     {
@@ -101,7 +104,7 @@ export default function ShortcutsPage() {
           </p>
         </div>
       </div>
-      <div className="grid gap-6">
+      <div className="grid gap-6 pb-8">
         <Card x-chunk="dashboard-04-chunk-2">
           <CardHeader>
             <CardTitle>Nodes</CardTitle>
@@ -114,7 +117,23 @@ export default function ShortcutsPage() {
               domLayout="autoHeight"
               pagination={false}
               columnDefs={colDefs}
-              rowData={rowData}
+              rowData={nodesRowData}
+            />
+          </CardContent>
+        </Card>
+        <Card x-chunk="dashboard-04-chunk-2">
+          <CardHeader>
+            <CardTitle>Flow</CardTitle>
+            <CardDescription>
+              Shortcuts relating to the flow.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TableComponent
+              domLayout="autoHeight"
+              pagination={false}
+              columnDefs={colDefs}
+              rowData={flowRowData}
             />
           </CardContent>
         </Card>

From 239a24ac1692753842498648843df9a601c6d9ae Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 17:01:26 +0200
Subject: [PATCH 074/142] Fixed badge showing blank when no type is selected

---
 .../pages/GlobalVariablesPage/index.tsx       | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 867a078b7..ff674e5e6 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -8,32 +8,45 @@ import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
-import { cn } from "../../../../utils/utils";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
+import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
-  const rows: Array<{type: string | undefined; id: string; name: string}> = [];
-  const globalVariablesEntries = useGlobalVariablesStore(state => state.globalVariablesEntries);
-  const removeGlobalVariable = useGlobalVariablesStore(state => state.removeGlobalVariable);
-  const globalVariables = useGlobalVariablesStore(state => state.globalVariables);
+  const rows: Array<{ type: string | undefined; id: string; name: string }> =
+    [];
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
+  );
+  const removeGlobalVariable = useGlobalVariablesStore(
+    (state) => state.removeGlobalVariable
+  );
+  const globalVariables = useGlobalVariablesStore(
+    (state) => state.globalVariables
+  );
   globalVariablesEntries.forEach((e) => {
-    const globalVariableObj = globalVariables[e]
-    rows.push({type: globalVariableObj.type, id: globalVariableObj.id, name: e})
-  })
+    const globalVariableObj = globalVariables[e];
+    rows.push({
+      type: globalVariableObj.type,
+      id: globalVariableObj.id,
+      name: e,
+    });
+  });
 
   const BadgeRenderer = (props) => {
-    return (
+    return props.value !== "" ? (
       <div>
         <Badge variant="outline" size="md" className="font-normal">
           {props.value}
         </Badge>
       </div>
+    ) : (
+      <div></div>
     );
   };
 
   useEffect(() => {
-    setRowData(rows)
-  }, [globalVariables])
+    setRowData(rows);
+  }, [globalVariables]);
 
   const DropdownEditor = ({ options, value, onValueChange }) => {
     return (
@@ -113,9 +126,9 @@ export default function GlobalVariablesPage() {
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
   function removeVariables() {
-    selectedRows.forEach(row => {
-      removeGlobalVariable(row)
-    })
+    selectedRows.forEach((row) => {
+      removeGlobalVariable(row);
+    });
   }
 
   return (

From 2625e320c9f95606d0ae28e8f877250881c1acff Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 12:54:59 -0300
Subject: [PATCH 075/142] Refactored GlobalVariablesPage component to use
 useEffect hook for populating rows dynamically

---
 .../pages/GlobalVariablesPage/index.tsx       | 61 +++++--------------
 1 file changed, 14 insertions(+), 47 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index ff674e5e6..d0d786985 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -12,8 +12,6 @@ import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
-  const rows: Array<{ type: string | undefined; id: string; name: string }> =
-    [];
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
   );
@@ -23,14 +21,6 @@ export default function GlobalVariablesPage() {
   const globalVariables = useGlobalVariablesStore(
     (state) => state.globalVariables
   );
-  globalVariablesEntries.forEach((e) => {
-    const globalVariableObj = globalVariables[e];
-    rows.push({
-      type: globalVariableObj.type,
-      id: globalVariableObj.id,
-      name: e,
-    });
-  });
 
   const BadgeRenderer = (props) => {
     return props.value !== "" ? (
@@ -43,8 +33,18 @@ export default function GlobalVariablesPage() {
       <div></div>
     );
   };
+  const [rowData, setRowData] = useState<{ type: string | undefined; id: string; name: string; }[]>();
 
   useEffect(() => {
+    const rows:Array<{type: string | undefined; id: string; name: string}> = [];
+    globalVariablesEntries.forEach((e) => {
+      const globalVariableObj = globalVariables[e];
+      rows.push({
+        type: globalVariableObj.type,
+        id: globalVariableObj.id,
+        name: e,
+      });
+    });
     setRowData(rows);
   }, [globalVariables]);
 
@@ -70,57 +70,24 @@ export default function GlobalVariablesPage() {
       cellRenderer: BadgeRenderer,
       cellEditor: DropdownEditor,
       cellEditorParams: {
-        options: ["Prompt", "Credential"],
+        options: ["Generic", "Credential"],
       },
       flex: 1,
-      editable: true,
+      editable: false,
     },
     {
       field: "value",
       cellEditor: "agLargeTextCellEditor",
-      cellEditorPopup: true,
       flex: 2,
-      editable: true,
+      editable: false,
     },
     {
       headerName: "Apply To Fields",
       field: "defaultFields",
       flex: 1,
-      editable: true,
+      editable: false,
     },
-  ]);
 
-  const [rowData, setRowData] = useState([
-    {
-      name: "OpenAI Key",
-      type: "Credential",
-      value: "apijpioj09u302j0982ejf",
-      defaultFields: "Open AI API Key",
-    },
-    {
-      name: "Prompt",
-      type: "Prompt",
-      value: `Answer user's questions based on the document below:
-
-    ---
-    
-    {Document}
-    
-    ---
-    
-    Question:
-    {Question}
-    
-    Answer:
-    `,
-      defaultFields: ["Prompt"],
-    },
-    {
-      name: "Azure Key",
-      type: "Credential",
-      value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
-      defaultFields: ["Azure API Key"],
-    },
   ]);
 
   const [selectedRows, setSelectedRows] = useState<string[]>([]);

From de1d5ddf009a078e247ed3e84fb02b33b21c8a86 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 13:23:00 -0300
Subject: [PATCH 076/142] Refactored InputGlobalComponent to use
 removeGlobalVariable instead of deleteGlobalVariable

---
 src/frontend/src/components/inputGlobalComponent/index.tsx | 4 +---
 src/frontend/src/stores/globalVariables.ts                 | 6 +++++-
 src/frontend/src/types/zustand/globalVariables/index.ts    | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 19f12e9d4..b2052ab84 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -43,9 +43,7 @@ export default function InputGlobalComponent({
   function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {
-      deleteGlobalVariable(id)
-        .then((_) => {
-          removeGlobalVariable(key);
+      removeGlobalVariable(key).then((_) => {
           if (
             data?.node?.template[name].value === key &&
             data?.node?.template[name].load_from_db
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index ff0514042..5a2a67fa4 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { GlobalVariablesStore } from "../types/zustand/globalVariables";
+import { deleteGlobalVariable } from "../controllers/API";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
@@ -29,7 +30,10 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(newVariables),
       });
     },
-    removeGlobalVariable: (name) => {
+    removeGlobalVariable:async (name) => {
+      const id = get().globalVariables[name]?.id;
+      if (id === undefined) return;
+      await deleteGlobalVariable(id)
       const newVariables = { ...get().globalVariables };
       delete newVariables[name];
       set({
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index d34973a17..0fc9bb473 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -5,7 +5,7 @@ export type GlobalVariablesStore = {
     [name: string]: { id: string; type?: string, default_fields?: string[]};
   }) => void;
   addGlobalVariable: (name: string, id: string, type?: string, default_fields?: string[]) => void;
-  removeGlobalVariable: (name: string) => void;
+  removeGlobalVariable: (name: string) => Promise<void>;
   getVariableId: (name: string) => string | undefined;
   unavaliableFields: Set<string>;
   setUnavaliableFields: (fields: Set<string>) => void;

From edabb31112da106d5dd0527165711375e433850c Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 30 Apr 2024 13:33:37 -0300
Subject: [PATCH 077/142] =?UTF-8?q?=E2=9C=A8=20(StringListInput.py):=20add?=
 =?UTF-8?q?=20a=20new=20custom=20component=20called=20"StringListInput"=20?=
 =?UTF-8?q?to=20handle=20string=20list=20inputs=20=E2=9C=A8=20(KeyPairOutp?=
 =?UTF-8?q?ut.py):=20add=20a=20new=20custom=20component=20called=20"KeyPai?=
 =?UTF-8?q?rOutput"=20to=20handle=20dictionary=20outputs=20=E2=9C=A8=20(St?=
 =?UTF-8?q?ringListOutput.py):=20add=20a=20new=20custom=20component=20call?=
 =?UTF-8?q?ed=20"StringListOutput"=20to=20handle=20string=20list=20outputs?=
 =?UTF-8?q?=20=F0=9F=9A=80=20(constants.ts):=20add=20"StringListInput"=20a?=
 =?UTF-8?q?nd=20"StringListOutput"=20to=20the=20list=20of=20supported=20in?=
 =?UTF-8?q?put=20and=20output=20types=20=E2=99=BB=EF=B8=8F=20(index.tsx):?=
 =?UTF-8?q?=20refactor=20IOKeyPairInput=20component=20to=20accept=20an=20a?=
 =?UTF-8?q?dditional=20prop=20"isInputField"=20and=20disable=20input=20fie?=
 =?UTF-8?q?lds=20if=20it's=20false=20=E2=99=BB=EF=B8=8F=20(index.tsx):=20r?=
 =?UTF-8?q?efactor=20IOFieldView=20component=20to=20handle=20rendering=20o?=
 =?UTF-8?q?f=20"StringListInput"=20and=20"StringListOutput"=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/inputs/StringListInput.py      | 13 ++++++++++
 .../components/outputs/KeyPairOutput.py       | 19 ++++++++++++++
 .../components/outputs/StringListOutput.py    | 13 ++++++++++
 src/frontend/src/constants/constants.ts       |  3 +++
 .../components/keyPairInput/index.tsx         | 22 +++++++++++++---
 .../IOModal/components/IOFieldView/index.tsx  | 25 +++++++++++++++++++
 6 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/backend/base/langflow/components/inputs/StringListInput.py
 create mode 100644 src/backend/base/langflow/components/outputs/KeyPairOutput.py
 create mode 100644 src/backend/base/langflow/components/outputs/StringListOutput.py

diff --git a/src/backend/base/langflow/components/inputs/StringListInput.py b/src/backend/base/langflow/components/inputs/StringListInput.py
new file mode 100644
index 000000000..1fef86be1
--- /dev/null
+++ b/src/backend/base/langflow/components/inputs/StringListInput.py
@@ -0,0 +1,13 @@
+# 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 {"param": {"display_name": "String List Input", "field_type": "str", "list": True}}
+
+    def build(self, param: list) -> Record:
+        return Record(data=param)
diff --git a/src/backend/base/langflow/components/outputs/KeyPairOutput.py b/src/backend/base/langflow/components/outputs/KeyPairOutput.py
new file mode 100644
index 000000000..f2204bb83
--- /dev/null
+++ b/src/backend/base/langflow/components/outputs/KeyPairOutput.py
@@ -0,0 +1,19 @@
+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/StringListOutput.py b/src/backend/base/langflow/components/outputs/StringListOutput.py
new file mode 100644
index 000000000..9e5384986
--- /dev/null
+++ b/src/backend/base/langflow/components/outputs/StringListOutput.py
@@ -0,0 +1,13 @@
+# 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 {"param": {"display_name": "String List Output", "field_type": "str", "list": True}}
+
+    def build(self, param: list) -> Record:
+        return Record(data=param)
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index f8d45da02..6893d0d03 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -716,6 +716,7 @@ export const INPUT_TYPES = new Set([
   "TextInput",
   "KeyPairInput",
   "JsonInput",
+  "StringListInput",
 ]);
 export const OUTPUT_TYPES = new Set([
   "ChatOutput",
@@ -724,6 +725,8 @@ export const OUTPUT_TYPES = new Set([
   "ImageOutput",
   "CSVOutput",
   "JsonOutput",
+  "KeyPairOutput",
+  "StringListOutput",
 ]);
 
 export const CHAT_FIRST_INITIAL_TEXT =
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
index b0b557c55..2e95e78ef 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/keyPairInput/index.tsx
@@ -4,7 +4,21 @@ import IconComponent from "../../../../../../components/genericIconComponent";
 import { Input } from "../../../../../../components/ui/input";
 import { classNames } from "../../../../../../utils/utils";
 
-const IOKeyPairInput = ({ value, onChange, duplicateKey, isList = true }) => {
+export type IOKeyPairInputProps = {
+  value: any;
+  onChange: (value: any) => void;
+  duplicateKey: boolean;
+  isList: boolean;
+  isInputField?: boolean;
+};
+
+const IOKeyPairInput = ({
+  value,
+  onChange,
+  duplicateKey,
+  isList = true,
+  isInputField,
+}: IOKeyPairInputProps) => {
   const checkValueType = (value) => {
     return Array.isArray(value) ? value : [value];
   };
@@ -39,6 +53,7 @@ const IOKeyPairInput = ({ value, onChange, duplicateKey, isList = true }) => {
                   className={classNames(duplicateKey ? "input-invalid" : "")}
                   placeholder="Type key..."
                   onChange={(event) => handleChangeKey(event, index)}
+                  disabled={!isInputField}
                 />
 
                 <Input
@@ -48,9 +63,10 @@ const IOKeyPairInput = ({ value, onChange, duplicateKey, isList = true }) => {
                   onChange={(event) =>
                     handleChangeValue(event.target.value, index)
                   }
+                  disabled={!isInputField}
                 />
 
-                {isList && index === ref.current.length - 1 ? (
+                {isList && isInputField && index === ref.current.length - 1 ? (
                   <button
                     onClick={() => {
                       let newInputList = _.cloneDeep(ref.current);
@@ -63,7 +79,7 @@ const IOKeyPairInput = ({ value, onChange, duplicateKey, isList = true }) => {
                       className={"h-4 w-4 hover:text-accent-foreground"}
                     />
                   </button>
-                ) : isList ? (
+                ) : isList && isInputField ? (
                   <button
                     onClick={() => {
                       let newInputList = _.cloneDeep(ref.current);
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
index 468b090fe..7605f2438 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
@@ -101,6 +101,7 @@ export default function IOFieldView({
                 }}
                 duplicateKey={errorDuplicateKey}
                 isList={node.data.node!.template["input_value"]?.list ?? false}
+                isInputField
               />
             );
 
@@ -119,6 +120,9 @@ export default function IOFieldView({
               />
             );
 
+          case "StringListInput":
+            return <>diusahjduisahudsa</>;
+
           default:
             return (
               <Textarea
@@ -226,6 +230,27 @@ export default function IOFieldView({
               />
             );
 
+          case "KeyPairOutput":
+            return (
+              <IOKeyPairInput
+                value={node.data.node!.template["input_value"]?.value}
+                onChange={(e) => {
+                  if (node) {
+                    let newNode = cloneDeep(node);
+                    newNode.data.node!.template["input_value"].value = e;
+                    setNode(node.id, newNode);
+                  }
+                  const valueToNumbers = convertValuesToNumbers(e);
+                  setErrorDuplicateKey(hasDuplicateKeys(valueToNumbers));
+                }}
+                duplicateKey={errorDuplicateKey}
+                isList={node.data.node!.template["input_value"]?.list ?? false}
+              />
+            );
+
+          case "StringListOutput":
+            return <>diusahjduisahudsa</>;
+
           default:
             return (
               <Textarea

From 71a9051727030f420b8b4feb50b75096a68657eb Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 30 Apr 2024 13:34:27 -0300
Subject: [PATCH 078/142] Add default_fields attribute to VariableRead model
 and update create_variable method in VariableService

---
 .../services/database/models/variable/model.py        |  1 +
 .../base/langflow/services/variable/service.py        | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/backend/base/langflow/services/database/models/variable/model.py b/src/backend/base/langflow/services/database/models/variable/model.py
index cf2236fe1..5c56f5b6d 100644
--- a/src/backend/base/langflow/services/database/models/variable/model.py
+++ b/src/backend/base/langflow/services/database/models/variable/model.py
@@ -52,6 +52,7 @@ class VariableRead(SQLModel):
     id: UUID
     name: Optional[str] = Field(None, description="Name of the variable")
     type: Optional[str] = Field(None, description="Type of the variable")
+    default_fields: Optional[List[str]] = Field(None, description="Default fields for the variable")
 
 
 class VariableUpdate(SQLModel):
diff --git a/src/backend/base/langflow/services/variable/service.py b/src/backend/base/langflow/services/variable/service.py
index ef23a95a2..ea5126d79 100644
--- a/src/backend/base/langflow/services/variable/service.py
+++ b/src/backend/base/langflow/services/variable/service.py
@@ -30,7 +30,14 @@ class VariableService(Service):
                 if var in os.environ:
                     logger.debug(f"Creating {var} variable from environment.")
                     try:
-                        self.create_variable(user_id, var, os.environ[var], _type="Credential", session=session)
+                        self.create_variable(
+                            user_id=user_id,
+                            name=var,
+                            value=os.environ[var],
+                            default_fields=[],
+                            _type="Credential",
+                            session=session,
+                        )
                     except Exception as e:
                         logger.error(f"Error creating {var} variable: {e}")
 
@@ -91,6 +98,7 @@ class VariableService(Service):
         user_id: Union[UUID, str],
         name: str,
         value: str,
+        default_fields: list[str] = [],
         _type: str = "Generic",
         session: Session = Depends(get_session),
     ):
@@ -98,6 +106,7 @@ class VariableService(Service):
             name=name,
             type=_type,
             value=auth_utils.encrypt_api_key(value, settings_service=self.settings_service),
+            default_fields=default_fields,
         )
         variable = Variable.model_validate(variable_base, from_attributes=True, update={"user_id": user_id})
         session.add(variable)

From 17403d817297a3fffddbba115e3b64aa6807c502 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 13:34:44 -0300
Subject: [PATCH 079/142] Refactored GlobalVariablesStore to include a value
 property in globalVariables object

---
 .../types/zustand/globalVariables/index.ts    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 0fc9bb473..45fda27cd 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -1,10 +1,23 @@
 export type GlobalVariablesStore = {
   globalVariablesEntries: Array<string>;
-  globalVariables: { [name: string]: { id: string; type?: string, default_fields?: string[] } };
+  globalVariables: {
+    [name: string]: {
+      id: string;
+      type?: string;
+      default_fields?: string[];
+      value?: string;
+    };
+  };
   setGlobalVariables: (variables: {
-    [name: string]: { id: string; type?: string, default_fields?: string[]};
+    [name: string]: { id: string; type?: string; default_fields?: string[],value?: string };
   }) => void;
-  addGlobalVariable: (name: string, id: string, type?: string, default_fields?: string[]) => void;
+  addGlobalVariable: (
+    name: string,
+    id: string,
+    type?: string,
+    default_fields?: string[],
+    value?: string
+  ) => void;
   removeGlobalVariable: (name: string) => Promise<void>;
   getVariableId: (name: string) => string | undefined;
   unavaliableFields: Set<string>;

From 15de984bb66921790cb95b21666b52e4b9b383c6 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 13:59:55 -0300
Subject: [PATCH 080/142] Refactor GlobalVariablesPage component to include
 default_fields in rowData

---
 src/frontend/src/controllers/API/index.ts     |  3 ++-
 .../pages/GlobalVariablesPage/index.tsx       | 25 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 8c5cc6892..8770f1b5e 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -860,13 +860,14 @@ export async function requestLogout() {
 }
 
 export async function getGlobalVariables(): Promise<{
-  [key: string]: { id: string; type: string };
+  [key: string]: { id: string; type: string,default_fields:string[] };
 }> {
   const globalVariables = {};
   (await api.get(`${BASE_URL_API}variables/`)).data.forEach((element) => {
     globalVariables[element.name] = {
       id: element.id,
       type: element.type,
+      default_fields:element.default_fields
     };
   });
   return globalVariables;
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index d0d786985..cc65efcdb 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -33,18 +33,25 @@ export default function GlobalVariablesPage() {
       <div></div>
     );
   };
-  const [rowData, setRowData] = useState<{ type: string | undefined; id: string; name: string; }[]>();
+
+
+  const [rowData, setRowData] = useState<{ type: string | undefined;
+     id: string; name: string; default_fields:string | undefined }[]>();
 
   useEffect(() => {
-    const rows:Array<{type: string | undefined; id: string; name: string}> = [];
+    const rows:Array<{type: string | undefined; id: string;
+       name: string;default_fields:string | undefined}> = [];
     globalVariablesEntries.forEach((e) => {
       const globalVariableObj = globalVariables[e];
+      console.log(globalVariableObj);
       rows.push({
         type: globalVariableObj.type,
         id: globalVariableObj.id,
+        default_fields: (globalVariableObj.default_fields??[]).join(", "),
         name: e,
       });
     });
+    console.log(rows);
     setRowData(rows);
   }, [globalVariables]);
 
@@ -75,15 +82,15 @@ export default function GlobalVariablesPage() {
       flex: 1,
       editable: false,
     },
-    {
-      field: "value",
-      cellEditor: "agLargeTextCellEditor",
-      flex: 2,
-      editable: false,
-    },
+    // {
+    //   field: "value",
+    //   cellEditor: "agLargeTextCellEditor",
+    //   flex: 2,
+    //   editable: false,
+    // },
     {
       headerName: "Apply To Fields",
-      field: "defaultFields",
+      field: "default_fields",
       flex: 1,
       editable: false,
     },

From df6924c73e55809f1d122a99aafb0fb614b1545b Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 14:20:38 -0300
Subject: [PATCH 081/142] Refactor GlobalVariablesPage component to include
 default_fields in rowData

---
 src/frontend/src/App.tsx                          |  4 +++-
 .../addNewVariableButton.tsx                      | 11 +++++++++--
 src/frontend/src/utils/utils.ts                   | 15 +++++++++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 6c5af17df..d0a74982c 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -22,7 +22,7 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useGlobalVariablesStore } from "./stores/globalVariables";
 import { useStoreStore } from "./stores/storeStore";
 import { useTypesStore } from "./stores/typesStore";
-
+import { getUnavailableFields } from "./utils/utils";
 export default function App() {
   const removeFromTempNotificationList = useAlertStore(
     (state) => state.removeFromTempNotificationList
@@ -48,6 +48,7 @@ export default function App() {
   const setGlobalVariables = useGlobalVariablesStore(
     (state) => state.setGlobalVariables
   );
+  const setUnavailableFields = useGlobalVariablesStore((state) => state.setUnavaliableFields);
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();
   const dark = useDarkStore((state) => state.dark);
@@ -95,6 +96,7 @@ export default function App() {
         refreshFlows();
         const res = await getGlobalVariables();
         setGlobalVariables(res);
+        setUnavailableFields(getUnavailableFields(res));
         checkHasStore();
         fetchApiData();
       } catch (error) {
diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index aae36775d..b5a3dde26 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -22,9 +22,15 @@ 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 = useGlobalVariablesStore((state) => state.unavaliableFields);
+  const availableFields = Array.from(componentFields).filter((field) => !unavaliableFields.has(field));
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
+  console.log(componentFields);
+  console.log(unavaliableFields);
+  console.log(availableFields);
+
   function handleSaveVariable() {
     let data: { name: string; value: string; type?: string; default_fields?: string[] } = {
       name: key,
@@ -39,6 +45,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
         setKey("");
         setValue("");
         setType("");
+        setFields([]);
         setOpen(false);
       })
       .catch((error) => {
@@ -98,8 +105,8 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             setSelectedOptions={(value) => setFields(value)}
             selectedOptions={fields}
             password={false}
-            options={Array.from(componentFields)}
-            placeholder="Choose a type for the variable..."
+            options={availableFields}
+            placeholder="Choose a field for the variable..."
           ></InputComponent>
         </div>
       </BaseModal.Content>
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index afcc264f6..43c8549eb 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -91,6 +91,21 @@ export function toTitleCase(
     .join(" ");
 }
 
+export function getUnavailableFields(
+  variables:{[key: string]: { id: string; type: string,default_fields:string[] }}
+): Set<string> {
+  console.log(variables)
+  const set = new Set<string>();
+  Object.keys(variables).forEach((key) => {
+    if(variables[key].default_fields){
+      variables[key].default_fields.forEach((field) => {
+        set.add(field);
+      });
+    }
+  });
+  return set;
+}
+
 export const upperCaseWords: string[] = ["llm", "uri"];
 export function checkUpperWords(str: string): string {
   const words = str.split(" ").map((word) => {

From ca1bb8dd36140f615533b61309cef4c34f653546 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 14:21:51 -0300
Subject: [PATCH 082/142] remove console.logs

---
 .../addNewVariableButtonComponent/addNewVariableButton.tsx     | 3 ---
 .../src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx | 2 --
 src/frontend/src/utils/reactflowUtils.ts                       | 1 -
 src/frontend/src/utils/utils.ts                                | 1 -
 4 files changed, 7 deletions(-)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index b5a3dde26..a0da18db9 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -27,9 +27,6 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
-  console.log(componentFields);
-  console.log(unavaliableFields);
-  console.log(availableFields);
 
   function handleSaveVariable() {
     let data: { name: string; value: string; type?: string; default_fields?: string[] } = {
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index cc65efcdb..802663924 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -43,7 +43,6 @@ export default function GlobalVariablesPage() {
        name: string;default_fields:string | undefined}> = [];
     globalVariablesEntries.forEach((e) => {
       const globalVariableObj = globalVariables[e];
-      console.log(globalVariableObj);
       rows.push({
         type: globalVariableObj.type,
         id: globalVariableObj.id,
@@ -51,7 +50,6 @@ export default function GlobalVariablesPage() {
         name: e,
       });
     });
-    console.log(rows);
     setRowData(rows);
   }, [globalVariables]);
 
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index ad1244495..df56e0711 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1244,7 +1244,6 @@ export function extractFieldsFromComponenents(data:APIObjectType ) {
       });
     });
   });
-  console.log(fields);
   return fields;
 }
 
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 43c8549eb..53c61ee77 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -94,7 +94,6 @@ export function toTitleCase(
 export function getUnavailableFields(
   variables:{[key: string]: { id: string; type: string,default_fields:string[] }}
 ): Set<string> {
-  console.log(variables)
   const set = new Set<string>();
   Object.keys(variables).forEach((key) => {
     if(variables[key].default_fields){

From 242bd55a24ef6b33af442f94a16b3a4233ebdba1 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 14:26:15 -0300
Subject: [PATCH 083/142] Update AddNewVariableButton component to set default
 type value

---
 .../addNewVariableButtonComponent/addNewVariableButton.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index a0da18db9..abacdb6a8 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -17,7 +17,7 @@ import { useTypesStore } from "../../stores/typesStore";
 export default function AddNewVariableButton({ children }): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
-  const [type, setType] = useState("");
+  const [type, setType] = useState("Generic");
   const [fields, setFields] = useState<string[]>([]);
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);

From 90f1efb18b8f7b2ac88d79f78aab083c7c347e6d Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 30 Apr 2024 14:34:54 -0300
Subject: [PATCH 084/142] Refactor Alembic migration scripts and Variable model

---
 .../1f4d6df60295_add_default_fields_column.py |  2 -
 ...d85f_set_name_and_value_to_not_nullable.py | 52 +++++++++++++++++++
 .../database/models/variable/model.py         |  4 +-
 3 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/backend/base/langflow/alembic/versions/c153816fd85f_set_name_and_value_to_not_nullable.py

diff --git a/src/backend/base/langflow/alembic/versions/1f4d6df60295_add_default_fields_column.py b/src/backend/base/langflow/alembic/versions/1f4d6df60295_add_default_fields_column.py
index 7b69058c2..7cf2fd083 100644
--- a/src/backend/base/langflow/alembic/versions/1f4d6df60295_add_default_fields_column.py
+++ b/src/backend/base/langflow/alembic/versions/1f4d6df60295_add_default_fields_column.py
@@ -22,7 +22,6 @@ depends_on: Union[str, Sequence[str], None] = None
 def upgrade() -> None:
     conn = op.get_bind()
     inspector = Inspector.from_engine(conn)  # type: ignore
-    table_names = inspector.get_table_names()
     # ### commands auto generated by Alembic - please adjust! ###
     column_names = [column["name"] for column in inspector.get_columns("variable")]
     with op.batch_alter_table("variable", schema=None) as batch_op:
@@ -35,7 +34,6 @@ def upgrade() -> None:
 def downgrade() -> None:
     conn = op.get_bind()
     inspector = Inspector.from_engine(conn)  # type: ignore
-    table_names = inspector.get_table_names()
     # ### commands auto generated by Alembic - please adjust! ###
     column_names = [column["name"] for column in inspector.get_columns("variable")]
     with op.batch_alter_table("variable", schema=None) as batch_op:
diff --git a/src/backend/base/langflow/alembic/versions/c153816fd85f_set_name_and_value_to_not_nullable.py b/src/backend/base/langflow/alembic/versions/c153816fd85f_set_name_and_value_to_not_nullable.py
new file mode 100644
index 000000000..26cf872ab
--- /dev/null
+++ b/src/backend/base/langflow/alembic/versions/c153816fd85f_set_name_and_value_to_not_nullable.py
@@ -0,0 +1,52 @@
+"""Set name and value to not nullable
+
+Revision ID: c153816fd85f
+Revises: 1f4d6df60295
+Create Date: 2024-04-30 14:31:23.898995
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy.engine.reflection import Inspector
+
+# revision identifiers, used by Alembic.
+revision: str = "c153816fd85f"
+down_revision: Union[str, None] = "1f4d6df60295"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    # ### commands auto generated by Alembic - please adjust! ###
+    columns = inspector.get_columns("variable")
+    with op.batch_alter_table("variable", schema=None) as batch_op:
+        name_column = [column for column in columns if column["name"] == "name"][0]
+        if name_column and name_column[0]["nullable"]:
+            batch_op.alter_column("name", existing_type=sa.VARCHAR(), nullable=False)
+        value_column = [column for column in columns if column["name"] == "value"][0]
+        if value_column and value_column[0]["nullable"]:
+            batch_op.alter_column("value", existing_type=sa.VARCHAR(), nullable=False)
+
+
+# ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    columns = inspector.get_columns("variable")
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("variable", schema=None) as batch_op:
+        name_column = [column for column in columns if column["name"] == "name"][0]
+        if name_column and not name_column[0]["nullable"]:
+            batch_op.alter_column("name", existing_type=sa.VARCHAR(), nullable=True)
+        value_column = [column for column in columns if column["name"] == "value"][0]
+        if value_column and not value_column[0]["nullable"]:
+            batch_op.alter_column("name", existing_type=sa.VARCHAR(), nullable=True)
+
+    # ### end Alembic commands ###
diff --git a/src/backend/base/langflow/services/database/models/variable/model.py b/src/backend/base/langflow/services/database/models/variable/model.py
index 5c56f5b6d..bf61c25dc 100644
--- a/src/backend/base/langflow/services/database/models/variable/model.py
+++ b/src/backend/base/langflow/services/database/models/variable/model.py
@@ -13,8 +13,8 @@ def utc_now():
 
 
 class VariableBase(SQLModel):
-    name: Optional[str] = Field(None, description="Name of the variable")
-    value: Optional[str] = Field(None, description="Encrypted value of the variable")
+    name: str = Field(description="Name of the variable")
+    value: str = Field(description="Encrypted value of the variable")
     default_fields: Optional[List[str]] = Field(sa_column=Column(JSON))
     type: Optional[str] = Field(None, description="Type of the variable")
 

From 027cfe81fc5745c4ab209e43f88a4fe416118bc7 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 30 Apr 2024 14:35:09 -0300
Subject: [PATCH 085/142] format

---
 src/backend/base/langflow/components/models/AzureOpenAIModel.py | 1 -
 src/backend/base/langflow/components/models/ChatLiteLLMModel.py | 2 +-
 src/backend/base/langflow/schema/schema.py                      | 2 +-
 src/backend/base/langflow/services/database/service.py          | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/backend/base/langflow/components/models/AzureOpenAIModel.py b/src/backend/base/langflow/components/models/AzureOpenAIModel.py
index b6d3607f3..a2ee20b28 100644
--- a/src/backend/base/langflow/components/models/AzureOpenAIModel.py
+++ b/src/backend/base/langflow/components/models/AzureOpenAIModel.py
@@ -1,6 +1,5 @@
 from typing import Optional
 
-from langchain.llms.base import BaseLanguageModel
 from langchain_openai import AzureChatOpenAI
 from pydantic.v1 import SecretStr
 
diff --git a/src/backend/base/langflow/components/models/ChatLiteLLMModel.py b/src/backend/base/langflow/components/models/ChatLiteLLMModel.py
index 23ac483cb..95574f0a5 100644
--- a/src/backend/base/langflow/components/models/ChatLiteLLMModel.py
+++ b/src/backend/base/langflow/components/models/ChatLiteLLMModel.py
@@ -4,7 +4,7 @@ from langchain_community.chat_models.litellm import ChatLiteLLM, ChatLiteLLMExce
 
 from langflow.base.constants import STREAM_INFO_TEXT
 from langflow.base.models.model import LCModelComponent
-from langflow.field_typing import BaseLanguageModel, Text
+from langflow.field_typing import Text
 
 
 class ChatLiteLLMModelComponent(LCModelComponent):
diff --git a/src/backend/base/langflow/schema/schema.py b/src/backend/base/langflow/schema/schema.py
index 979c78920..5d2967dac 100644
--- a/src/backend/base/langflow/schema/schema.py
+++ b/src/backend/base/langflow/schema/schema.py
@@ -4,7 +4,7 @@ from typing import Literal, Optional
 from langchain_core.documents import Document
 from langchain_core.messages import BaseMessage
 from pydantic import BaseModel, model_validator
-from langchain_core.messages import HumanMessage, AIMessage, BaseMessage
+from langchain_core.messages import HumanMessage, AIMessage
 
 
 class Record(BaseModel):
diff --git a/src/backend/base/langflow/services/database/service.py b/src/backend/base/langflow/services/database/service.py
index 5ca20c642..ee2812d32 100644
--- a/src/backend/base/langflow/services/database/service.py
+++ b/src/backend/base/langflow/services/database/service.py
@@ -133,7 +133,7 @@ class DatabaseService(Service):
         alembic_cfg = Config(stdout=buffer)
         # alembic_cfg.attributes["connection"] = session
         alembic_cfg.set_main_option("script_location", str(self.script_location))
-        alembic_cfg.set_main_option("sqlalchemy.url", self.database_url.replace('%', '%%'))
+        alembic_cfg.set_main_option("sqlalchemy.url", self.database_url.replace("%", "%%"))
 
         should_initialize_alembic = False
         with Session(self.engine) as session:

From 56342f4489c33ddd4a989eb7255fc4549dee13ce Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 14:35:28 -0300
Subject: [PATCH 086/142] Refactor globalVariables.ts to include
 unavaliableFields in useGlobalVariablesStore

---
 src/frontend/src/App.tsx                   | 1 -
 src/frontend/src/stores/globalVariables.ts | 4 ++++
 src/frontend/src/utils/utils.ts            | 4 ++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index d0a74982c..1f3f76ac2 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -96,7 +96,6 @@ export default function App() {
         refreshFlows();
         const res = await getGlobalVariables();
         setGlobalVariables(res);
-        setUnavailableFields(getUnavailableFields(res));
         checkHasStore();
         fetchApiData();
       } catch (error) {
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 5a2a67fa4..7d3113ff0 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 import { deleteGlobalVariable } from "../controllers/API";
+import { getUnavailableFields } from "../utils/utils";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
@@ -20,6 +21,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({
         globalVariables: variables,
         globalVariablesEntries: Object.keys(variables),
+        unavaliableFields: getUnavailableFields(variables)
       });
     },
     addGlobalVariable: (name, id, type, default_fields) => {
@@ -28,6 +30,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
+        unavaliableFields: getUnavailableFields(newVariables)
       });
     },
     removeGlobalVariable:async (name) => {
@@ -39,6 +42,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
+        unavaliableFields: getUnavailableFields(newVariables)
       });
     },
     getVariableId: (name) => {
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 53c61ee77..87aa5e376 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -92,12 +92,12 @@ export function toTitleCase(
 }
 
 export function getUnavailableFields(
-  variables:{[key: string]: { id: string; type: string,default_fields:string[] }}
+  variables:{[key: string]: { default_fields?:string[] }}
 ): Set<string> {
   const set = new Set<string>();
   Object.keys(variables).forEach((key) => {
     if(variables[key].default_fields){
-      variables[key].default_fields.forEach((field) => {
+      variables[key].default_fields!.forEach((field) => {
         set.add(field);
       });
     }

From 854afe02acb989b135155000dd9624c2ef82f538 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 14:37:12 -0300
Subject: [PATCH 087/142] code format

---
 src/frontend/src/App.tsx                      |  5 ++--
 .../addNewVariableButton.tsx                  | 19 +++++++++++----
 .../components/dropdownComponent/index.tsx    | 10 ++++++--
 .../components/inputGlobalComponent/index.tsx |  4 ++--
 src/frontend/src/controllers/API/index.ts     |  8 +++----
 src/frontend/src/pages/SettingsPage/index.tsx | 20 ++++++++--------
 .../pages/GlobalVariablesPage/index.tsx       | 23 +++++++++++++------
 .../pages/ShortcutsPage/index.tsx             |  4 +---
 src/frontend/src/routes.tsx                   |  1 -
 src/frontend/src/stores/flowsManagerStore.ts  | 20 ++++++++++++----
 src/frontend/src/stores/globalVariables.ts    | 12 +++++-----
 src/frontend/src/stores/typesStore.ts         | 13 ++++++++---
 .../types/zustand/globalVariables/index.ts    |  7 +++++-
 src/frontend/src/utils/reactflowUtils.ts      |  9 +++++---
 src/frontend/src/utils/utils.ts               |  8 +++----
 15 files changed, 106 insertions(+), 57 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 1f3f76ac2..396906e91 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -22,7 +22,6 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useGlobalVariablesStore } from "./stores/globalVariables";
 import { useStoreStore } from "./stores/storeStore";
 import { useTypesStore } from "./stores/typesStore";
-import { getUnavailableFields } from "./utils/utils";
 export default function App() {
   const removeFromTempNotificationList = useAlertStore(
     (state) => state.removeFromTempNotificationList
@@ -48,7 +47,9 @@ export default function App() {
   const setGlobalVariables = useGlobalVariablesStore(
     (state) => state.setGlobalVariables
   );
-  const setUnavailableFields = useGlobalVariablesStore((state) => state.setUnavaliableFields);
+  const setUnavailableFields = useGlobalVariablesStore(
+    (state) => state.setUnavaliableFields
+  );
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();
   const dark = useDarkStore((state) => state.dark);
diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index abacdb6a8..d1e6c7ffa 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -3,6 +3,7 @@ import { registerGlobalVariable } from "../../controllers/API";
 import BaseModal from "../../modals/baseModal";
 import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
+import { useTypesStore } from "../../stores/typesStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
@@ -10,7 +11,6 @@ import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
-import { useTypesStore } from "../../stores/typesStore";
 
 //TODO IMPLEMENT FORM LOGIC
 
@@ -22,18 +22,27 @@ 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 = useGlobalVariablesStore((state) => state.unavaliableFields);
-  const availableFields = Array.from(componentFields).filter((field) => !unavaliableFields.has(field));
+  const unavaliableFields = useGlobalVariablesStore(
+    (state) => state.unavaliableFields
+  );
+  const availableFields = Array.from(componentFields).filter(
+    (field) => !unavaliableFields.has(field)
+  );
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
 
   function handleSaveVariable() {
-    let data: { name: string; value: string; type?: string; default_fields?: string[] } = {
+    let data: {
+      name: string;
+      value: string;
+      type?: string;
+      default_fields?: string[];
+    } = {
       name: key,
       type,
       value,
-      default_fields: fields
+      default_fields: fields,
     };
     registerGlobalVariable(data)
       .then((res) => {
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index c3407aba8..b17332268 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -33,7 +33,9 @@ export default function Dropdown({
 
   const refButton = useRef<HTMLButtonElement>(null);
 
-  const PopoverContentDropdown = children ? PopoverContent : PopoverContentWithoutPortal;
+  const PopoverContentDropdown = children
+    ? PopoverContent
+    : PopoverContentWithoutPortal;
 
   return (
     <>
@@ -77,7 +79,11 @@ export default function Dropdown({
             )}
             <PopoverContentDropdown
               className="nocopy nowheel nopan nodelete nodrag noundo p-0"
-              style={children ? {} : { minWidth: refButton?.current?.clientWidth ?? "200px" }}
+              style={
+                children
+                  ? {}
+                  : { minWidth: refButton?.current?.clientWidth ?? "200px" }
+              }
             >
               <Command>
                 <CommandInput placeholder="Search options..." className="h-9" />
diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index b2052ab84..0d1b0ea40 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { deleteGlobalVariable } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
@@ -43,7 +42,8 @@ export default function InputGlobalComponent({
   function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {
-      removeGlobalVariable(key).then((_) => {
+      removeGlobalVariable(key)
+        .then((_) => {
           if (
             data?.node?.template[name].value === key &&
             data?.node?.template[name].load_from_db
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 8770f1b5e..36c1d0fed 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -860,14 +860,14 @@ export async function requestLogout() {
 }
 
 export async function getGlobalVariables(): Promise<{
-  [key: string]: { id: string; type: string,default_fields:string[] };
+  [key: string]: { id: string; type: string; default_fields: string[] };
 }> {
   const globalVariables = {};
   (await api.get(`${BASE_URL_API}variables/`)).data.forEach((element) => {
     globalVariables[element.name] = {
       id: element.id,
       type: element.type,
-      default_fields:element.default_fields
+      default_fields: element.default_fields,
     };
   });
   return globalVariables;
@@ -877,7 +877,7 @@ export async function registerGlobalVariable({
   name,
   value,
   type,
-  default_fields=[],
+  default_fields = [],
 }: {
   name: string;
   value: string;
@@ -888,7 +888,7 @@ export async function registerGlobalVariable({
     name,
     value,
     type,
-    default_fields:default_fields
+    default_fields: default_fields,
   });
 }
 
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index 86d47cd34..554be79b6 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@@ -16,16 +16,16 @@ export default function SettingsPage(): JSX.Element {
 
   const sidebarNavItems = [
     {
-        title: "General",
-        href: "/settings/general",
-        icon: (
-          <ForwardedIconComponent
-            name="SlidersHorizontal"
-            className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
-          />
-        ),
-      },
-      /* {
+      title: "General",
+      href: "/settings/general",
+      icon: (
+        <ForwardedIconComponent
+          name="SlidersHorizontal"
+          className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+        />
+      ),
+    },
+    /* {
         title: "Theme",
         href: "/settings/theme",
         icon: (
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 802663924..266712881 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -34,19 +34,29 @@ export default function GlobalVariablesPage() {
     );
   };
 
-
-  const [rowData, setRowData] = useState<{ type: string | undefined;
-     id: string; name: string; default_fields:string | undefined }[]>();
+  const [rowData, setRowData] =
+    useState<
+      {
+        type: string | undefined;
+        id: string;
+        name: string;
+        default_fields: string | undefined;
+      }[]
+    >();
 
   useEffect(() => {
-    const rows:Array<{type: string | undefined; id: string;
-       name: string;default_fields:string | undefined}> = [];
+    const rows: Array<{
+      type: string | undefined;
+      id: string;
+      name: string;
+      default_fields: string | undefined;
+    }> = [];
     globalVariablesEntries.forEach((e) => {
       const globalVariableObj = globalVariables[e];
       rows.push({
         type: globalVariableObj.type,
         id: globalVariableObj.id,
-        default_fields: (globalVariableObj.default_fields??[]).join(", "),
+        default_fields: (globalVariableObj.default_fields ?? []).join(", "),
         name: e,
       });
     });
@@ -92,7 +102,6 @@ export default function GlobalVariablesPage() {
       flex: 1,
       editable: false,
     },
-
   ]);
 
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index 1dac8d095..adcfcefef 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -124,9 +124,7 @@ export default function ShortcutsPage() {
         <Card x-chunk="dashboard-04-chunk-2">
           <CardHeader>
             <CardTitle>Flow</CardTitle>
-            <CardDescription>
-              Shortcuts relating to the flow.
-            </CardDescription>
+            <CardDescription>Shortcuts relating to the flow.</CardDescription>
           </CardHeader>
           <CardContent>
             <TableComponent
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 2061017ec..3e573f171 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -11,7 +11,6 @@ import ApiKeysPage from "./pages/ApiKeysPage";
 import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
 import ComponentsComponent from "./pages/MainPage/components/components";
-import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 import SettingsPage from "./pages/SettingsPage";
 import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
 import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index 94d104823..cebf15479 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -83,7 +83,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
             );
             useTypesStore.setState((state) => ({
               data: { ...state.data, ["saved_components"]: data },
-              ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
+              ComponentFields: extractFieldsFromComponenents({
+                ...state.data,
+                ["saved_components"]: data,
+              }),
             }));
             set({ isLoading: false });
             resolve();
@@ -199,7 +202,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           set({ isLoading: false });
           useTypesStore.setState((state) => ({
             data: { ...state.data, ["saved_components"]: data },
-            ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
+            ComponentFields: extractFieldsFromComponenents({
+              ...state.data,
+              ["saved_components"]: data,
+            }),
           }));
         }, 200);
         // addFlowToLocalState(newFlow);
@@ -222,7 +228,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         set({ isLoading: false });
         useTypesStore.setState((state) => ({
           data: { ...state.data, ["saved_components"]: data },
-          ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
+          ComponentFields: extractFieldsFromComponenents({
+            ...state.data,
+            ["saved_components"]: data,
+          }),
         }));
 
         // Return the id
@@ -252,7 +261,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           set({ isLoading: false });
           useTypesStore.setState((state) => ({
             data: { ...state.data, ["saved_components"]: data },
-            ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
+            ComponentFields: extractFieldsFromComponenents({
+              ...state.data,
+              ["saved_components"]: data,
+            }),
           }));
           resolve();
         });
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 7d3113ff0..d67da5079 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -1,6 +1,6 @@
 import { create } from "zustand";
-import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 import { deleteGlobalVariable } from "../controllers/API";
+import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 import { getUnavailableFields } from "../utils/utils";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
@@ -21,7 +21,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({
         globalVariables: variables,
         globalVariablesEntries: Object.keys(variables),
-        unavaliableFields: getUnavailableFields(variables)
+        unavaliableFields: getUnavailableFields(variables),
       });
     },
     addGlobalVariable: (name, id, type, default_fields) => {
@@ -30,19 +30,19 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
-        unavaliableFields: getUnavailableFields(newVariables)
+        unavaliableFields: getUnavailableFields(newVariables),
       });
     },
-    removeGlobalVariable:async (name) => {
+    removeGlobalVariable: async (name) => {
       const id = get().globalVariables[name]?.id;
       if (id === undefined) return;
-      await deleteGlobalVariable(id)
+      await deleteGlobalVariable(id);
       const newVariables = { ...get().globalVariables };
       delete newVariables[name];
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
-        unavaliableFields: getUnavailableFields(newVariables)
+        unavaliableFields: getUnavailableFields(newVariables),
       });
     },
     getVariableId: (name) => {
diff --git a/src/frontend/src/stores/typesStore.ts b/src/frontend/src/stores/typesStore.ts
index f2539a8d3..c92236e03 100644
--- a/src/frontend/src/stores/typesStore.ts
+++ b/src/frontend/src/stores/typesStore.ts
@@ -2,7 +2,11 @@ import { create } from "zustand";
 import { getAll } from "../controllers/API";
 import { APIDataType } from "../types/api";
 import { TypesStoreType } from "../types/zustand/types";
-import { extractFieldsFromComponenents, templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
+import {
+  extractFieldsFromComponenents,
+  templatesGenerator,
+  typesGenerator,
+} from "../utils/reactflowUtils";
 import useAlertStore from "./alertStore";
 import useFlowsManagerStore from "./flowsManagerStore";
 
@@ -28,7 +32,10 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
           set((old) => ({
             types: typesGenerator(data),
             data: { ...old.data, ...data },
-            ComponentFields: extractFieldsFromComponenents({ ...old.data, ...data }),
+            ComponentFields: extractFieldsFromComponenents({
+              ...old.data,
+              ...data,
+            }),
             templates: templatesGenerator(data),
           }));
           setLoading(false);
@@ -50,7 +57,7 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
   },
   setData: (change: APIDataType | ((old: APIDataType) => APIDataType)) => {
     let newChange = typeof change === "function" ? change(get().data) : change;
-    set({ data: newChange});
+    set({ data: newChange });
     get().setComponentFields(extractFieldsFromComponenents(newChange));
   },
 }));
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 45fda27cd..b69952993 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -9,7 +9,12 @@ export type GlobalVariablesStore = {
     };
   };
   setGlobalVariables: (variables: {
-    [name: string]: { id: string; type?: string; default_fields?: string[],value?: string };
+    [name: string]: {
+      id: string;
+      type?: string;
+      default_fields?: string[];
+      value?: string;
+    };
   }) => void;
   addGlobalVariable: (
     name: string,
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index df56e0711..deb470f80 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1234,13 +1234,16 @@ export function templatesGenerator(data: APIObjectType) {
   }, {});
 }
 
-export function extractFieldsFromComponenents(data:APIObjectType ) {
+export function extractFieldsFromComponenents(data: APIObjectType) {
   const fields = new Set<string>();
   Object.keys(data).forEach((key) => {
     Object.keys(data[key]).forEach((kind) => {
       Object.keys(data[key][kind].template).forEach((field) => {
-        if(data[key][kind].template[field].display_name && data[key][kind].template[field].show)
-        fields.add(data[key][kind].template[field].display_name!);
+        if (
+          data[key][kind].template[field].display_name &&
+          data[key][kind].template[field].show
+        )
+          fields.add(data[key][kind].template[field].display_name!);
       });
     });
   });
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 87aa5e376..3dafc3877 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -91,12 +91,12 @@ export function toTitleCase(
     .join(" ");
 }
 
-export function getUnavailableFields(
-  variables:{[key: string]: { default_fields?:string[] }}
-): Set<string> {
+export function getUnavailableFields(variables: {
+  [key: string]: { default_fields?: string[] };
+}): Set<string> {
   const set = new Set<string>();
   Object.keys(variables).forEach((key) => {
-    if(variables[key].default_fields){
+    if (variables[key].default_fields) {
       variables[key].default_fields!.forEach((field) => {
         set.add(field);
       });

From c56733f3a4338ec0a8802f6c1b63b7a817353a8c Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 30 Apr 2024 14:38:07 -0300
Subject: [PATCH 088/142] Add .prettierignore file and update package.json to
 include ignore path for Prettier

---
 src/frontend/.prettierignore | 1 +
 src/frontend/package.json    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/.prettierignore

diff --git a/src/frontend/.prettierignore b/src/frontend/.prettierignore
new file mode 100644
index 000000000..07ed7069a
--- /dev/null
+++ b/src/frontend/.prettierignore
@@ -0,0 +1 @@
+build/*
\ No newline at end of file
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 26dc911af..bc8dcc041 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -72,7 +72,7 @@
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "format": "npx prettier --write \"./**/*.{js,jsx,ts,tsx,json,md}\"",
+    "format": "npx prettier --write \"./**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
     "type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
   },
   "eslintConfig": {

From d4a516c2eb0a7cb53da6062469bffb58f8638b24 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 14:40:36 -0300
Subject: [PATCH 089/142] Refactor useGlobalVariablesStore to update
 unavaliableFields in globalVariables.ts

---
 src/frontend/src/stores/globalVariables.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index d67da5079..636745d00 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -13,7 +13,9 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
       set({ unavaliableFields: get().unavaliableFields.add(field) });
     },
     removeUnavaliableField: (field) => {
-      get().unavaliableFields.delete(field);
+      const newFields = get().unavaliableFields;
+      newFields.delete(field);
+      set({ unavaliableFields: newFields });
     },
     globalVariablesEntries: [],
     globalVariables: {},

From 40aa3052791f51e6bf844fa235cb4ffedb4f29da Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 30 Apr 2024 14:45:01 -0300
Subject: [PATCH 090/142] =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20Remove=20?=
 =?UTF-8?q?unused=20import=20and=20update=20dependencies=20in=20InputGloba?=
 =?UTF-8?q?lComponent=20=F0=9F=93=9D=20(index.tsx):=20Add=20async/await=20?=
 =?UTF-8?q?to=20handleDelete=20function=20in=20InputGlobalComponent=20?=
 =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20Add=20try/catch=20block=20to=20re?=
 =?UTF-8?q?gisterGlobalVariable=20function=20in=20API=20controller=20?=
 =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20Add=20try/catch=20block=20to=20de?=
 =?UTF-8?q?leteGlobalVariable=20function=20in=20API=20controller=20?=
 =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20Add=20try/catch=20block=20to=20up?=
 =?UTF-8?q?dateGlobalVariable=20function=20in=20API=20controller=20?=
 =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20Remove=20unused=20import=20and=20?=
 =?UTF-8?q?add=20deleteGlobalVariable=20import=20in=20GlobalVariablesPage?=
 =?UTF-8?q?=20=F0=9F=93=9D=20(index.tsx):=20Add=20setErrorData=20and=20get?=
 =?UTF-8?q?VariableId=20hooks=20to=20GlobalVariablesPage=20=F0=9F=93=9D=20?=
 =?UTF-8?q?(index.tsx):=20Add=20async/await=20to=20removeVariables=20funct?=
 =?UTF-8?q?ion=20in=20GlobalVariablesPage=20=F0=9F=93=9D=20(globalVariable?=
 =?UTF-8?q?s.ts):=20Remove=20unused=20import=20in=20globalVariables=20stor?=
 =?UTF-8?q?e=20=F0=9F=93=9D=20(globalVariables.ts):=20Remove=20async/await?=
 =?UTF-8?q?=20from=20removeGlobalVariable=20function=20in=20globalVariable?=
 =?UTF-8?q?s=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/inputGlobalComponent/index.tsx | 12 +++---
 src/frontend/src/controllers/API/index.ts     | 43 ++++++++++++++-----
 .../pages/GlobalVariablesPage/index.tsx       | 30 ++++++++++---
 src/frontend/src/stores/globalVariables.ts    |  5 +--
 4 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index b2052ab84..f0f3f4cc3 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -3,7 +3,6 @@ import { deleteGlobalVariable } from "../../controllers/API";
 import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
-import { ResponseErrorDetailAPI } from "../../types/api";
 import { InputGlobalComponentType } from "../../types/components";
 import { cn } from "../../utils/utils";
 import AddNewVariableButton from "../addNewVariableButtonComponent/addNewVariableButton";
@@ -40,10 +39,12 @@ export default function InputGlobalComponent({
       }
   }, [globalVariablesEntries]);
 
-  function handleDelete(key: string) {
+  async function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {
-      removeGlobalVariable(key).then((_) => {
+      await deleteGlobalVariable(id)
+        .then(() => {
+          removeGlobalVariable(key);
           if (
             data?.node?.template[name].value === key &&
             data?.node?.template[name].load_from_db
@@ -52,11 +53,10 @@ export default function InputGlobalComponent({
             setDb(false);
           }
         })
-        .catch((error) => {
-          let responseError = error as ResponseErrorDetailAPI;
+        .catch(() => {
           setErrorData({
             title: "Error deleting variable",
-            list: [responseError.response.data.detail ?? "Unknown error"],
+            list: [cn("ID not found for variable: ", key)],
           });
         });
     } else {
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 8c5cc6892..3e9c1cc22 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -883,16 +883,29 @@ export async function registerGlobalVariable({
   type?: string;
   default_fields?: string[];
 }): Promise<AxiosResponse<{ name: string; id: string; type: string }>> {
-  return await api.post(`${BASE_URL_API}variables/`, {
-    name,
-    value,
-    type,
-    default_fields:default_fields
-  });
+  try{
+    const response = await api.post(`${BASE_URL_API}variables/`, {
+      name,
+      value,
+      type,
+      default_fields:default_fields
+    });
+    return response;
+  }
+  catch(error){
+    throw error;
+  }
+
 }
 
 export async function deleteGlobalVariable(id: string) {
-  api.delete(`${BASE_URL_API}variables/${id}`);
+  try{
+    const response = await api.delete(`${BASE_URL_API}variables/${id}`);
+    return response;
+  }
+  catch(error){
+    throw error;
+  }
 }
 
 export async function updateGlobalVariable(
@@ -900,10 +913,18 @@ export async function updateGlobalVariable(
   value: string,
   id: string
 ) {
-  api.patch(`${BASE_URL_API}variables/${id}`, {
-    name,
-    value,
-  });
+  try{
+    const response = api.patch(`${BASE_URL_API}variables/${id}`, {
+      name,
+      value,
+    });
+
+    return response;
+  }
+  catch(error){
+    throw error;
+  }
+
 }
 
 export async function getVerticesOrder(
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index d0d786985..e9e5bef18 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -8,6 +8,8 @@ import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
+import { deleteGlobalVariable } from "../../../../controllers/API";
+import useAlertStore from "../../../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 import { cn } from "../../../../utils/utils";
 
@@ -21,6 +23,8 @@ export default function GlobalVariablesPage() {
   const globalVariables = useGlobalVariablesStore(
     (state) => state.globalVariables
   );
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
 
   const BadgeRenderer = (props) => {
     return props.value !== "" ? (
@@ -33,10 +37,12 @@ export default function GlobalVariablesPage() {
       <div></div>
     );
   };
-  const [rowData, setRowData] = useState<{ type: string | undefined; id: string; name: string; }[]>();
+  const [rowData, setRowData] =
+    useState<{ type: string | undefined; id: string; name: string }[]>();
 
   useEffect(() => {
-    const rows:Array<{type: string | undefined; id: string; name: string}> = [];
+    const rows: Array<{ type: string | undefined; id: string; name: string }> =
+      [];
     globalVariablesEntries.forEach((e) => {
       const globalVariableObj = globalVariables[e];
       rows.push({
@@ -87,15 +93,27 @@ export default function GlobalVariablesPage() {
       flex: 1,
       editable: false,
     },
-
   ]);
 
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
-  function removeVariables() {
-    selectedRows.forEach((row) => {
-      removeGlobalVariable(row);
+  async function removeVariables() {
+    const deleteGlobalVariablesPromise = selectedRows.map(async (row) => {
+      const id = getVariableId(row);
+      const deleteGlobalVariables = deleteGlobalVariable(id!);
+      await deleteGlobalVariables;
     });
+    Promise.all(deleteGlobalVariablesPromise)
+      .then(() => {
+        selectedRows.forEach((row) => {
+          removeGlobalVariable(row);
+        });
+      })
+      .catch(() => {
+        setErrorData({
+          title: `Error deleting global variables.`,
+        });
+      });
   }
 
   return (
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 5a2a67fa4..701b7700e 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -1,6 +1,5 @@
 import { create } from "zustand";
 import { GlobalVariablesStore } from "../types/zustand/globalVariables";
-import { deleteGlobalVariable } from "../controllers/API";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
@@ -30,10 +29,10 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(newVariables),
       });
     },
-    removeGlobalVariable:async (name) => {
+    removeGlobalVariable: async (name) => {
       const id = get().globalVariables[name]?.id;
       if (id === undefined) return;
-      await deleteGlobalVariable(id)
+
       const newVariables = { ...get().globalVariables };
       delete newVariables[name];
       set({

From 354a7b5985a307af7bae19d1cf23f1fc7b8f541f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 30 Apr 2024 14:46:28 -0300
Subject: [PATCH 091/142] Refactor Alembic migration scripts to set name and
 value columns as not nullable

---
 .../c153816fd85f_set_name_and_value_to_not_nullable.py    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/backend/base/langflow/alembic/versions/c153816fd85f_set_name_and_value_to_not_nullable.py b/src/backend/base/langflow/alembic/versions/c153816fd85f_set_name_and_value_to_not_nullable.py
index 26cf872ab..cec3f6081 100644
--- a/src/backend/base/langflow/alembic/versions/c153816fd85f_set_name_and_value_to_not_nullable.py
+++ b/src/backend/base/langflow/alembic/versions/c153816fd85f_set_name_and_value_to_not_nullable.py
@@ -26,10 +26,10 @@ def upgrade() -> None:
     columns = inspector.get_columns("variable")
     with op.batch_alter_table("variable", schema=None) as batch_op:
         name_column = [column for column in columns if column["name"] == "name"][0]
-        if name_column and name_column[0]["nullable"]:
+        if name_column and name_column["nullable"]:
             batch_op.alter_column("name", existing_type=sa.VARCHAR(), nullable=False)
         value_column = [column for column in columns if column["name"] == "value"][0]
-        if value_column and value_column[0]["nullable"]:
+        if value_column and value_column["nullable"]:
             batch_op.alter_column("value", existing_type=sa.VARCHAR(), nullable=False)
 
 
@@ -43,10 +43,10 @@ def downgrade() -> None:
     # ### commands auto generated by Alembic - please adjust! ###
     with op.batch_alter_table("variable", schema=None) as batch_op:
         name_column = [column for column in columns if column["name"] == "name"][0]
-        if name_column and not name_column[0]["nullable"]:
+        if name_column and not name_column["nullable"]:
             batch_op.alter_column("name", existing_type=sa.VARCHAR(), nullable=True)
         value_column = [column for column in columns if column["name"] == "value"][0]
-        if value_column and not value_column[0]["nullable"]:
+        if value_column and not value_column["nullable"]:
             batch_op.alter_column("name", existing_type=sa.VARCHAR(), nullable=True)
 
     # ### end Alembic commands ###

From ec490a78a80cb92e285926f4aa5d3dfa97d575db Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 14:56:51 -0300
Subject: [PATCH 092/142] update UnavaliableFields structure

---
 .../addNewVariableButton.tsx                              | 5 +++--
 src/frontend/src/stores/globalVariables.ts                | 7 ++-----
 src/frontend/src/types/zustand/globalVariables/index.ts   | 5 ++---
 src/frontend/src/utils/utils.ts                           | 8 ++++----
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index d1e6c7ffa..e5e8dd488 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -22,9 +22,10 @@ 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 = useGlobalVariablesStore(
+  const unavaliableFields =new Set(Object.keys(useGlobalVariablesStore(
     (state) => state.unavaliableFields
-  );
+  )));
+
   const availableFields = Array.from(componentFields).filter(
     (field) => !unavaliableFields.has(field)
   );
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 636745d00..a66bf1589 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -5,16 +5,13 @@ import { getUnavailableFields } from "../utils/utils";
 
 export const useGlobalVariablesStore = create<GlobalVariablesStore>(
   (set, get) => ({
-    unavaliableFields: new Set(),
+    unavaliableFields: {},
     setUnavaliableFields: (fields) => {
       set({ unavaliableFields: fields });
     },
-    addUnavaliableField: (field) => {
-      set({ unavaliableFields: get().unavaliableFields.add(field) });
-    },
     removeUnavaliableField: (field) => {
       const newFields = get().unavaliableFields;
-      newFields.delete(field);
+      delete newFields[field];
       set({ unavaliableFields: newFields });
     },
     globalVariablesEntries: [],
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index b69952993..752336c19 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -25,8 +25,7 @@ export type GlobalVariablesStore = {
   ) => void;
   removeGlobalVariable: (name: string) => Promise<void>;
   getVariableId: (name: string) => string | undefined;
-  unavaliableFields: Set<string>;
-  setUnavaliableFields: (fields: Set<string>) => void;
-  addUnavaliableField: (field: string) => void;
+  unavaliableFields: {[name: string]: string};
+  setUnavaliableFields: (fields: {[name: string]: string}) => void;
   removeUnavaliableField: (field: string) => void;
 };
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 3dafc3877..1c580fa4b 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -93,16 +93,16 @@ export function toTitleCase(
 
 export function getUnavailableFields(variables: {
   [key: string]: { default_fields?: string[] };
-}): Set<string> {
-  const set = new Set<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) => {
-        set.add(field);
+        unVariables[field] = key;
       });
     }
   });
-  return set;
+  return unVariables;
 }
 
 export const upperCaseWords: string[] = ["llm", "uri"];

From 6261c71e01d64e521111e2524403c3ed6e2b3be3 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 15:11:26 -0300
Subject: [PATCH 093/142] Update InputGlobalComponent to handle
 unavaliableFields in useGlobalVariablesStore

---
 .../src/components/inputGlobalComponent/index.tsx      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 0d1b0ea40..6bd598778 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -23,6 +23,7 @@ export default function InputGlobalComponent({
   );
 
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
+  const unavaliableFields = useGlobalVariablesStore((state) => state.unavaliableFields);
   const removeGlobalVariable = useGlobalVariablesStore(
     (state) => state.removeGlobalVariable
   );
@@ -39,6 +40,15 @@ export default function InputGlobalComponent({
       }
   }, [globalVariablesEntries]);
 
+  useEffect(() => {
+    if (!data.node?.template[name].value && data.node?.template[name].display_name) {
+      if(unavaliableFields[data.node?.template[name].display_name!]){
+        setDb(true);
+        onChange(unavaliableFields[data.node?.template[name].display_name!]);
+      }
+    }
+  },[unavaliableFields]);
+
   function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {

From 4bbba570fe28e9bac8e97506bd9c0017f88f9c79 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 30 Apr 2024 15:18:36 -0300
Subject: [PATCH 094/142] Fix validation for empty variable name and value in
 create_variable function

---
 src/backend/base/langflow/api/v1/variable.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/backend/base/langflow/api/v1/variable.py b/src/backend/base/langflow/api/v1/variable.py
index b1cca14c1..f992c1429 100644
--- a/src/backend/base/langflow/api/v1/variable.py
+++ b/src/backend/base/langflow/api/v1/variable.py
@@ -37,7 +37,11 @@ def create_variable(
         variable_dict["user_id"] = current_user.id
 
         db_variable = Variable.model_validate(variable_dict)
-        if not db_variable.value:
+        if not db_variable.name and not db_variable.value:
+            raise HTTPException(status_code=400, detail="Variable name and value cannot be empty")
+        elif not db_variable.name:
+            raise HTTPException(status_code=400, detail="Variable name cannot be empty")
+        elif not db_variable.value:
             raise HTTPException(status_code=400, detail="Variable value cannot be empty")
         encrypted = auth_utils.encrypt_api_key(db_variable.value, settings_service=settings_service)
         db_variable.value = encrypted

From e82d8f482677850a9e5cdf2f9067e7c9c6a6c64c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 15:47:52 -0300
Subject: [PATCH 095/142] Update InputGlobalComponent to handle
 unavaliableFields in useGlobalVariablesStore

---
 src/frontend/src/components/inputGlobalComponent/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 6bd598778..c6feb8037 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -125,7 +125,8 @@ export default function InputGlobalComponent({
         </DeleteConfirmationModal>
       )}
       selectedOption={
-        data?.node?.template[name].load_from_db ?? false
+        data?.node?.template[name].load_from_db &&
+         globalVariablesEntries.includes(data?.node?.template[name].value??"")
           ? data?.node?.template[name].value
           : ""
       }

From 2fa7df09dcc5fc174770f53e6a4e02e68449def1 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Tue, 30 Apr 2024 17:09:03 -0300
Subject: [PATCH 096/142] Refactor: make global variables search input case
 insensitive

---
 src/frontend/src/components/inputComponent/index.tsx     | 2 +-
 .../SettingsPage/pages/GlobalVariablesPage/index.tsx     | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 4f3a207cc..e18c2b559 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -173,7 +173,7 @@ export default function InputComponent({
             >
               <Command
                 filter={(value, search) => {
-                  if (value.includes(search) || value.includes("doNotFilter-"))
+                  if (value.toLowerCase().includes(search.toLowerCase()) || value.includes("doNotFilter-"))
                     return 1; // ensures items arent filtered
                   return 0;
                 }}
diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index cc65efcdb..955a7cccd 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -41,14 +41,15 @@ export default function GlobalVariablesPage() {
   useEffect(() => {
     const rows:Array<{type: string | undefined; id: string;
        name: string;default_fields:string | undefined}> = [];
-    globalVariablesEntries.forEach((e) => {
-      const globalVariableObj = globalVariables[e];
-      console.log(globalVariableObj);
+
+    globalVariablesEntries.forEach((entrie) => {
+      const globalVariableObj = globalVariables[entrie];
+
       rows.push({
         type: globalVariableObj.type,
         id: globalVariableObj.id,
         default_fields: (globalVariableObj.default_fields??[]).join(", "),
-        name: e,
+        name: entrie,
       });
     });
     console.log(rows);

From b8b978431d8b7ff80fea7f3bfa207d8a260dffea Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 30 Apr 2024 17:56:12 -0300
Subject: [PATCH 097/142] =?UTF-8?q?=F0=9F=93=9D=20(inputComponent/index.ts?=
 =?UTF-8?q?x):=20improve=20code=20readability=20by=20formatting=20if=20sta?=
 =?UTF-8?q?tement=20=F0=9F=93=9D=20(inputComponent/index.tsx):=20improve?=
 =?UTF-8?q?=20code=20readability=20by=20formatting=20if=20statement=20?=
 =?UTF-8?q?=F0=9F=93=9D=20(inputGlobalComponent/index.tsx):=20add=20delay?=
 =?UTF-8?q?=20before=20resetting=20input=20value=20and=20setting=20db=20fl?=
 =?UTF-8?q?ag=20to=20improve=20user=20experience=20=F0=9F=93=9D=20(inputGl?=
 =?UTF-8?q?obalComponent/index.tsx):=20add=20delay=20before=20resetting=20?=
 =?UTF-8?q?input=20value=20and=20setting=20db=20flag=20to=20improve=20user?=
 =?UTF-8?q?=20experience=20=F0=9F=93=9D=20(inputGlobalComponent/index.tsx)?=
 =?UTF-8?q?:=20add=20console.log=20for=20debugging=20purposes=20?=
 =?UTF-8?q?=F0=9F=93=9D=20(inputGlobalComponent/index.tsx):=20improve=20co?=
 =?UTF-8?q?de=20readability=20by=20formatting=20if=20statement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/inputComponent/index.tsx     |  5 ++++-
 .../components/inputGlobalComponent/index.tsx   | 17 ++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index e18c2b559..e355293ff 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -173,7 +173,10 @@ export default function InputComponent({
             >
               <Command
                 filter={(value, search) => {
-                  if (value.toLowerCase().includes(search.toLowerCase()) || value.includes("doNotFilter-"))
+                  if (
+                    value.toLowerCase().includes(search.toLowerCase()) ||
+                    value.includes("doNotFilter-")
+                  )
                     return 1; // ensures items arent filtered
                   return 0;
                 }}
diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 235b00988..0f0097fcf 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -37,8 +37,10 @@ export default function InputGlobalComponent({
         !globalVariablesEntries.includes(data.node?.template[name].value) &&
         data.node?.template[name].load_from_db
       ) {
-        onChange("");
-        setDb(false);
+        setTimeout(() => {
+          onChange("");
+          setDb(false);
+        }, 100);
       }
   }, [globalVariablesEntries]);
 
@@ -48,8 +50,10 @@ export default function InputGlobalComponent({
       data.node?.template[name].display_name
     ) {
       if (unavaliableFields[data.node?.template[name].display_name!]) {
-        setDb(true);
-        onChange(unavaliableFields[data.node?.template[name].display_name!]);
+        setTimeout(() => {
+          setDb(true);
+          onChange(unavaliableFields[data.node?.template[name].display_name!]);
+        }, 100);
       }
     }
   }, [unavaliableFields]);
@@ -81,6 +85,9 @@ export default function InputGlobalComponent({
       });
     }
   }
+
+  console.log(data.node?.template[name], data.node?.template[name].password);
+
   return (
     <InputComponent
       id={"input-" + name}
@@ -131,7 +138,7 @@ export default function InputGlobalComponent({
       )}
       selectedOption={
         data?.node?.template[name].load_from_db &&
-         globalVariablesEntries.includes(data?.node?.template[name].value??"")
+        globalVariablesEntries.includes(data?.node?.template[name].value ?? "")
           ? data?.node?.template[name].value
           : ""
       }

From 093384fcb71831283c772eed6de8addf93f8c944 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 18:37:12 -0300
Subject: [PATCH 098/142] Update component names and shortcuts in ShortcutsPage

---
 .../pages/ShortcutsPage/index.tsx             | 46 +++++--------------
 1 file changed, 12 insertions(+), 34 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index adcfcefef..6f911068b 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -36,44 +36,41 @@ export default function ShortcutsPage() {
 
   const [nodesRowData, setNodesRowData] = useState([
     {
-      name: "Advanced Settings",
+      name: "Component Advanced Settings",
       shortcut: advancedShortcut,
     },
     {
-      name: "Minimize",
+      name: "Component Minimize",
       shortcut: minizmizeShortcut,
     },
     {
-      name: "Code",
+      name: "Component Code",
       shortcut: codeShortcut,
     },
     {
-      name: "Copy",
+      name: "Component Copy",
       shortcut: copyShortcut,
     },
     {
-      name: "Duplicate",
+      name: "Component Duplicate",
       shortcut: duplicateShortcut,
     },
     {
-      name: "Share",
+      name: "Component Share",
       shortcut: shareShortcut,
     },
     {
-      name: "Docs",
+      name: "Component Docs",
       shortcut: docsShortcut,
     },
     {
-      name: "Save",
+      name: "Component Save",
       shortcut: saveShortcut,
     },
     {
-      name: "Delete",
+      name: "Component Delete",
       shortcut: deleteShortcut,
     },
-  ]);
-
-  const [flowRowData, setFlowRowData] = useState([
     {
       name: "Open Playground",
       shortcut: interactionShortcut,
@@ -87,6 +84,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">
@@ -99,19 +97,13 @@ export default function ShortcutsPage() {
             />
           </h2>
           <p className="text-sm text-muted-foreground">
-            Customize, manage and create shortcuts for quick access to
+            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">
-          <CardHeader>
-            <CardTitle>Nodes</CardTitle>
-            <CardDescription>
-              Shortcuts relating to the nodes in the workspace.
-            </CardDescription>
-          </CardHeader>
+        <Card x-chunk="dashboard-04-chunk-2" className="pt-4">
           <CardContent>
             <TableComponent
               domLayout="autoHeight"
@@ -121,20 +113,6 @@ export default function ShortcutsPage() {
             />
           </CardContent>
         </Card>
-        <Card x-chunk="dashboard-04-chunk-2">
-          <CardHeader>
-            <CardTitle>Flow</CardTitle>
-            <CardDescription>Shortcuts relating to the flow.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <TableComponent
-              domLayout="autoHeight"
-              pagination={false}
-              columnDefs={colDefs}
-              rowData={flowRowData}
-            />
-          </CardContent>
-        </Card>
       </div>
     </div>
   );

From b054b4e42712fa8bc67efecd618df8061bbcbc49 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 18:42:47 -0300
Subject: [PATCH 099/142] =?UTF-8?q?=F0=9F=90=9B=20(inputGlobalComponent/in?=
 =?UTF-8?q?dex.tsx):=20Fix=20condition=20to=20include=20disabled=20check?=
 =?UTF-8?q?=20in=20if=20statement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 0f0097fcf..8cd1b5872 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -49,7 +49,7 @@ export default function InputGlobalComponent({
       !data.node?.template[name].value &&
       data.node?.template[name].display_name
     ) {
-      if (unavaliableFields[data.node?.template[name].display_name!]) {
+      if (unavaliableFields[data.node?.template[name].display_name!] && !disabled) {
         setTimeout(() => {
           setDb(true);
           onChange(unavaliableFields[data.node?.template[name].display_name!]);

From 341b2cb7787bd2c372f7da56de735ddb08fa4b6a Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 18:45:20 -0300
Subject: [PATCH 100/142] Update component names in ShortcutsPage

---
 .../SettingsPage/pages/ShortcutsPage/index.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
index 6f911068b..de2c92b2d 100644
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@@ -36,39 +36,39 @@ export default function ShortcutsPage() {
 
   const [nodesRowData, setNodesRowData] = useState([
     {
-      name: "Component Advanced Settings",
+      name: "Advanced Settings Component",
       shortcut: advancedShortcut,
     },
     {
-      name: "Component Minimize",
+      name: "Minimize Component",
       shortcut: minizmizeShortcut,
     },
     {
-      name: "Component Code",
+      name: "Code Component",
       shortcut: codeShortcut,
     },
     {
-      name: "Component Copy",
+      name: "Copy Component",
       shortcut: copyShortcut,
     },
     {
-      name: "Component Duplicate",
+      name: "Duplicate Component",
       shortcut: duplicateShortcut,
     },
     {
-      name: "Component Share",
+      name: "Share Component",
       shortcut: shareShortcut,
     },
     {
-      name: "Component Docs",
+      name: "Docs Component",
       shortcut: docsShortcut,
     },
     {
-      name: "Component Save",
+      name: "Save Component",
       shortcut: saveShortcut,
     },
     {
-      name: "Component Delete",
+      name: "Delete Component",
       shortcut: deleteShortcut,
     },
     {

From 2295754942ef6bd18632bfa46041e09ab69211fc Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 19:10:19 -0300
Subject: [PATCH 101/142] Refactor component styles and icons

---
 src/frontend/src/components/chatComponent/index.tsx | 8 ++++----
 src/frontend/src/utils/styleUtils.ts                | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 609c6dd0c..45af60840 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -87,13 +87,13 @@ export default function FlowToolbar(): JSX.Element {
           }
         >
           <div className="flex">
-            <div className="flex h-full w-full  gap-1 rounded-sm text-medium-indigo transition-all">
+            <div className="flex h-full w-full  gap-1 rounded-sm transition-all">
               {hasIO ? (
                 <IOModal open={open} setOpen={setOpen} disable={!hasIO}>
-                  <div className="relative inline-flex w-full items-center justify-center   gap-1 px-5 py-3 text-sm font-semibold text-medium-indigo transition-all transition-all duration-500 ease-in-out ease-in-out hover:bg-hover">
+                  <div className="relative inline-flex w-full items-center justify-center   gap-1 px-5 py-3 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-hover">
                     <ForwardedIconComponent
-                      name="Zap"
-                      className={"message-button-icon h-5 w-5 transition-all"}
+                      name="MonitorPlay"
+                      className={" h-5 w-5 transition-all"}
                     />
                     Playground
                   </div>
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index a0c9c9756..ae9f8756b 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -136,6 +136,7 @@ import {
   X,
   XCircle,
   Zap,
+  MonitorPlay
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -504,6 +505,7 @@ export const nodeIconsLucide: iconsType = {
   Bot,
   Delete,
   Command,
+  MonitorPlay,
   ArrowBigUp,
   Dot,
 };

From 38d1e37023cc8295b72e73249ab897acb7b3dfb2 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 19:14:49 -0300
Subject: [PATCH 102/142] Refactor component styles and icons

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

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 9148e6515..2724ffa8a 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -320,9 +320,9 @@ export default function CollectionCardComponent({
                     >
                       {!loadingPlayground ? (
                         <IconComponent
-                          name="Zap"
+                          name="MonitorPlay"
                           className={cn(
-                            "h-5 w-5 select-none fill-current text-medium-indigo",
+                            "h-5 w-5 select-none",
                             !authorized ? " text-ring" : ""
                           )}
                         />
@@ -462,8 +462,8 @@ export default function CollectionCardComponent({
               >
                 {!loadingPlayground ? (
                   <IconComponent
-                    name="Zap"
-                    className="h-4 w-4 select-none fill-current text-medium-indigo"
+                    name="MonitorPlay"
+                    className="h-4 w-4 select-none"
                   />
                 ) : (
                   <Loading className="h-4 w-4 text-medium-indigo" />

From c63b949a441612ede4ad6f87c4a286ac8abab197 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 30 Apr 2024 20:19:01 -0300
Subject: [PATCH 103/142] update playground icon

---
 src/frontend/src/components/cardComponent/index.tsx | 6 +++---
 src/frontend/src/components/chatComponent/index.tsx | 2 +-
 src/frontend/src/utils/styleUtils.ts                | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 2724ffa8a..80ca05038 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -316,11 +316,11 @@ export default function CollectionCardComponent({
                           });
                         }
                       }}
-                      data-testid={`like-${data.name}`}
+                      data-testid={`playground-${data.name}`}
                     >
                       {!loadingPlayground ? (
                         <IconComponent
-                          name="MonitorPlay"
+                          name="BotMessageSquareIcon"
                           className={cn(
                             "h-5 w-5 select-none",
                             !authorized ? " text-ring" : ""
@@ -462,7 +462,7 @@ export default function CollectionCardComponent({
               >
                 {!loadingPlayground ? (
                   <IconComponent
-                    name="MonitorPlay"
+                    name="BotMessageSquareIcon"
                     className="h-4 w-4 select-none"
                   />
                 ) : (
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 45af60840..cac3c548a 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -92,7 +92,7 @@ export default function FlowToolbar(): JSX.Element {
                 <IOModal open={open} setOpen={setOpen} disable={!hasIO}>
                   <div className="relative inline-flex w-full items-center justify-center   gap-1 px-5 py-3 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-hover">
                     <ForwardedIconComponent
-                      name="MonitorPlay"
+                      name="BotMessageSquareIcon"
                       className={" h-5 w-5 transition-all"}
                     />
                     Playground
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index ae9f8756b..32e480046 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -136,7 +136,7 @@ import {
   X,
   XCircle,
   Zap,
-  MonitorPlay
+  PlaySquare
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -145,7 +145,7 @@ import { AnthropicIcon } from "../icons/Anthropic";
 import { AstraDBIcon } from "../icons/AstraDB";
 import { AzureIcon } from "../icons/Azure";
 import { BingIcon } from "../icons/Bing";
-import { BotMessageSquareIcon } from "../icons/BotMessageSquare";
+import { BotMessageSquareIcon} from "../icons/BotMessageSquare";
 import { ChromaIcon } from "../icons/ChromaIcon";
 import { CohereIcon } from "../icons/Cohere";
 import { ElasticsearchIcon } from "../icons/ElasticsearchStore";
@@ -293,7 +293,8 @@ export const nodeIconsLucide: iconsType = {
   ListFlows: Group,
   ClearMessageHistory: FileClock,
   Python: PythonIcon,
-  ChatOutput: BotMessageSquareIcon,
+  ChatOutput: MessagesSquare,
+  BotMessageSquareIcon,
   ChatInput: MessagesSquare,
   inputs: Download,
   outputs: Upload,
@@ -505,7 +506,6 @@ export const nodeIconsLucide: iconsType = {
   Bot,
   Delete,
   Command,
-  MonitorPlay,
   ArrowBigUp,
   Dot,
 };

From fe8fc5bd3245575798db49f484260071ae26ccb1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 1 May 2024 02:04:54 +0200
Subject: [PATCH 104/142] Fixed bug of clicking on IO Modal

---
 .../src/components/cardComponent/index.tsx    | 548 +++++++++---------
 src/frontend/src/modals/IOModal/index.tsx     |   2 +-
 2 files changed, 281 insertions(+), 269 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 80ca05038..1a5a641d9 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -166,323 +166,335 @@ export default function CollectionCardComponent({
   }
 
   return (
-    <Card
-      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={onClick}
-    >
-      <div>
-        <CardHeader>
-          <div>
-            <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-              <IconComponent
-                className={cn(
-                  "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"
-                )}
-                name={data.is_component ? "ToyBrick" : "Group"}
-              />
-              <ShadTooltip content={data.name}>
-                <div className="w-full truncate">{data.name}</div>
-              </ShadTooltip>
-              {data?.metadata !== undefined && (
-                <div className="flex gap-3">
-                  {data.private && (
-                    <ShadTooltip content="Private">
-                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent name="Lock" className="h-4 w-4" />
-                      </span>
-                    </ShadTooltip>
+    <>
+      <Card
+        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={onClick}
+      >
+        <div>
+          <CardHeader>
+            <div>
+              <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+                <IconComponent
+                  className={cn(
+                    "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"
                   )}
-                  {!data.is_component && (
-                    <ShadTooltip content="Components">
+                  name={data.is_component ? "ToyBrick" : "Group"}
+                />
+                <ShadTooltip content={data.name}>
+                  <div className="w-full truncate">{data.name}</div>
+                </ShadTooltip>
+                {data?.metadata !== undefined && (
+                  <div className="flex gap-3">
+                    {data.private && (
+                      <ShadTooltip content="Private">
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <IconComponent name="Lock" className="h-4 w-4" />
+                        </span>
+                      </ShadTooltip>
+                    )}
+                    {!data.is_component && (
+                      <ShadTooltip content="Components">
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <IconComponent name="ToyBrick" className="h-4 w-4" />
+                          <span data-testid={`total-${data.name}`}>
+                            {data?.metadata?.total ?? 0}
+                          </span>
+                        </span>
+                      </ShadTooltip>
+                    )}
+                    <ShadTooltip content="Likes">
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                        <IconComponent name="ToyBrick" className="h-4 w-4" />
-                        <span data-testid={`total-${data.name}`}>
-                          {data?.metadata?.total ?? 0}
+                        <IconComponent
+                          name="Heart"
+                          className={cn("h-4 w-4 ")}
+                        />
+                        <span data-testid={`likes-${data.name}`}>
+                          {likes_count ?? 0}
                         </span>
                       </span>
                     </ShadTooltip>
-                  )}
-                  <ShadTooltip content="Likes">
-                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
-                      <span data-testid={`likes-${data.name}`}>
-                        {likes_count ?? 0}
-                      </span>
-                    </span>
-                  </ShadTooltip>
-                  <ShadTooltip content="Downloads">
-                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                      <IconComponent name="DownloadCloud" className="h-4 w-4" />
-                      <span data-testid={`downloads-${data.name}`}>
-                        {downloads_count ?? 0}
-                      </span>
-                    </span>
-                  </ShadTooltip>
-                </div>
-              )}
-
-              {onDelete && data?.metadata === undefined && (
-                <DeleteConfirmationModal
-                  onConfirm={() => {
-                    onDelete();
-                  }}
-                >
-                  <IconComponent
-                    name="Trash2"
-                    className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
-                  />
-                </DeleteConfirmationModal>
-              )}
-            </CardTitle>
-          </div>
-          {data.user_created && data.user_created.username && (
-            <span className="text-sm text-primary">
-              by <b>{data.user_created.username}</b>
-              {data.last_tested_version && (
-                <>
-                  {" "}
-                  |{" "}
-                  <span className="text-xs">
-                    {" "}
-                    ⛓︎ v{data.last_tested_version}
-                  </span>
-                </>
-              )}
-            </span>
-          )}
-
-          <CardDescription className="pb-2 pt-2">
-            <div className="truncate-doubleline">{data.description}</div>
-          </CardDescription>
-        </CardHeader>
-      </div>
-
-      <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-1 flex-wrap gap-2">
-              {data.tags &&
-                data.tags.length > 0 &&
-                data.tags.map((tag, index) => (
-                  <Badge
-                    key={index}
-                    variant="outline"
-                    size="xq"
-                    className="text-muted-foreground"
-                  >
-                    {tag.name}
-                  </Badge>
-                ))}
-            </div>
-            {data.liked_by_count != undefined && (
-              <div className="flex gap-0.5">
-                {playground && data?.metadata !== undefined && (
-                  <ShadTooltip
-                    content={
-                      authorized ? "Playground" : "Please review your API key."
-                    }
-                  >
-                    <Button
-                      disabled={loadingLike}
-                      variant="ghost"
-                      size="icon"
-                      className={
-                        "whitespace-nowrap" +
-                        (!authorized ? " cursor-not-allowed" : "")
-                      }
-                      onClick={(e) => {
-                        if (!authorized) {
-                          return;
-                        }
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setLoadingPlayground(true);
-                        if (getFlowById(data.id)) {
-                          setCurrentFlowId(data.id);
-                          setOpenPlayground(true);
-                          setLoadingPlayground(false);
-                        } else {
-                          getFlowData().then((res) => {
-                            setCurrentFlow(res);
-                            setOpenPlayground(true);
-                            setLoadingPlayground(false);
-                          });
-                        }
-                      }}
-                      data-testid={`playground-${data.name}`}
-                    >
-                      {!loadingPlayground ? (
+                    <ShadTooltip content="Downloads">
+                      <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                         <IconComponent
-                          name="BotMessageSquareIcon"
-                          className={cn(
-                            "h-5 w-5 select-none",
-                            !authorized ? " text-ring" : ""
-                          )}
+                          name="DownloadCloud"
+                          className="h-4 w-4"
                         />
-                      ) : (
-                        <Loading className="h-4 w-4 select-none text-medium-indigo" />
-                      )}
-                    </Button>
-                  </ShadTooltip>
+                        <span data-testid={`downloads-${data.name}`}>
+                          {downloads_count ?? 0}
+                        </span>
+                      </span>
+                    </ShadTooltip>
+                  </div>
                 )}
-                {onDelete && data?.metadata !== undefined ? (
-                  <ShadTooltip
-                    content={
-                      authorized ? "Delete" : "Please review your API key."
-                    }
+
+                {onDelete && data?.metadata === undefined && (
+                  <DeleteConfirmationModal
+                    onConfirm={() => {
+                      onDelete();
+                    }}
                   >
-                    <DeleteConfirmationModal
-                      onConfirm={() => {
-                        onDelete();
-                      }}
+                    <IconComponent
+                      name="Trash2"
+                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                    />
+                  </DeleteConfirmationModal>
+                )}
+              </CardTitle>
+            </div>
+            {data.user_created && data.user_created.username && (
+              <span className="text-sm text-primary">
+                by <b>{data.user_created.username}</b>
+                {data.last_tested_version && (
+                  <>
+                    {" "}
+                    |{" "}
+                    <span className="text-xs">
+                      {" "}
+                      ⛓︎ v{data.last_tested_version}
+                    </span>
+                  </>
+                )}
+              </span>
+            )}
+
+            <CardDescription className="pb-2 pt-2">
+              <div className="truncate-doubleline">{data.description}</div>
+            </CardDescription>
+          </CardHeader>
+        </div>
+
+        <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-1 flex-wrap gap-2">
+                {data.tags &&
+                  data.tags.length > 0 &&
+                  data.tags.map((tag, index) => (
+                    <Badge
+                      key={index}
+                      variant="outline"
+                      size="xq"
+                      className="text-muted-foreground"
+                    >
+                      {tag.name}
+                    </Badge>
+                  ))}
+              </div>
+              {data.liked_by_count != undefined && (
+                <div className="flex gap-0.5">
+                  {playground && data?.metadata !== undefined && (
+                    <ShadTooltip
+                      content={
+                        authorized
+                          ? "Playground"
+                          : "Please review your API key."
+                      }
                     >
                       <Button
+                        disabled={loadingLike}
                         variant="ghost"
                         size="icon"
                         className={
                           "whitespace-nowrap" +
                           (!authorized ? " cursor-not-allowed" : "")
                         }
+                        onClick={(e) => {
+                          if (!authorized) {
+                            return;
+                          }
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setLoadingPlayground(true);
+                          if (getFlowById(data.id)) {
+                            setCurrentFlowId(data.id);
+                            setOpenPlayground(true);
+                            setLoadingPlayground(false);
+                          } else {
+                            getFlowData().then((res) => {
+                              setCurrentFlow(res);
+                              setOpenPlayground(true);
+                              setLoadingPlayground(false);
+                            });
+                          }
+                        }}
+                        data-testid={`playground-${data.name}`}
+                      >
+                        {!loadingPlayground ? (
+                          <IconComponent
+                            name="BotMessageSquareIcon"
+                            className={cn(
+                              "h-5 w-5 select-none",
+                              !authorized ? " text-ring" : ""
+                            )}
+                          />
+                        ) : (
+                          <Loading className="h-4 w-4 select-none text-medium-indigo" />
+                        )}
+                      </Button>
+                    </ShadTooltip>
+                  )}
+                  {onDelete && data?.metadata !== undefined ? (
+                    <ShadTooltip
+                      content={
+                        authorized ? "Delete" : "Please review your API key."
+                      }
+                    >
+                      <DeleteConfirmationModal
+                        onConfirm={() => {
+                          onDelete();
+                        }}
+                      >
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className={
+                            "whitespace-nowrap" +
+                            (!authorized ? " cursor-not-allowed" : "")
+                          }
+                        >
+                          <IconComponent
+                            name="Trash2"
+                            className={cn(
+                              "h-5 w-5",
+                              !authorized ? " text-ring" : ""
+                            )}
+                          />
+                        </Button>
+                      </DeleteConfirmationModal>
+                    </ShadTooltip>
+                  ) : (
+                    <ShadTooltip
+                      content={
+                        authorized ? "Like" : "Please review your API key."
+                      }
+                    >
+                      <Button
+                        disabled={loadingLike}
+                        variant="ghost"
+                        size="icon"
+                        className={
+                          "whitespace-nowrap" +
+                          (!authorized ? " cursor-not-allowed" : "")
+                        }
+                        onClick={() => {
+                          if (!authorized) {
+                            return;
+                          }
+                          handleLike();
+                        }}
+                        data-testid={`like-${data.name}`}
                       >
                         <IconComponent
-                          name="Trash2"
+                          name="Heart"
                           className={cn(
                             "h-5 w-5",
+                            liked_by_user
+                              ? "fill-destructive stroke-destructive"
+                              : "",
                             !authorized ? " text-ring" : ""
                           )}
                         />
                       </Button>
-                    </DeleteConfirmationModal>
-                  </ShadTooltip>
-                ) : (
+                    </ShadTooltip>
+                  )}
                   <ShadTooltip
                     content={
-                      authorized ? "Like" : "Please review your API key."
+                      authorized
+                        ? isStore
+                          ? "Download"
+                          : "Install Locally"
+                        : "Please review your API key."
                     }
                   >
                     <Button
-                      disabled={loadingLike}
+                      disabled={loading}
                       variant="ghost"
                       size="icon"
                       className={
                         "whitespace-nowrap" +
-                        (!authorized ? " cursor-not-allowed" : "")
+                        (!authorized ? " cursor-not-allowed" : "") +
+                        (!loading ? " p-0.5" : "")
                       }
                       onClick={() => {
-                        if (!authorized) {
+                        if (loading || !authorized) {
                           return;
                         }
-                        handleLike();
+                        handleInstall();
                       }}
-                      data-testid={`like-${data.name}`}
+                      data-testid={`install-${data.name}`}
                     >
                       <IconComponent
-                        name="Heart"
+                        name={
+                          loading ? "Loader2" : isStore ? "Download" : "Plus"
+                        }
                         className={cn(
-                          "h-5 w-5",
-                          liked_by_user
-                            ? "fill-destructive stroke-destructive"
-                            : "",
+                          loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
                           !authorized ? " text-ring" : ""
                         )}
                       />
                     </Button>
                   </ShadTooltip>
-                )}
-                <ShadTooltip
-                  content={
-                    authorized
-                      ? isStore
-                        ? "Download"
-                        : "Install Locally"
-                      : "Please review your API key."
-                  }
-                >
-                  <Button
-                    disabled={loading}
-                    variant="ghost"
-                    size="icon"
-                    className={
-                      "whitespace-nowrap" +
-                      (!authorized ? " cursor-not-allowed" : "") +
-                      (!loading ? " p-0.5" : "")
-                    }
-                    onClick={() => {
-                      if (loading || !authorized) {
-                        return;
-                      }
-                      handleInstall();
-                    }}
-                    data-testid={`install-${data.name}`}
-                  >
-                    <IconComponent
-                      name={loading ? "Loader2" : isStore ? "Download" : "Plus"}
-                      className={cn(
-                        loading ? "h-5 w-5 animate-spin" : "h-5 w-5",
-                        !authorized ? " text-ring" : ""
-                      )}
-                    />
-                  </Button>
-                </ShadTooltip>
-              </div>
-            )}
-            {button && button}
-            {playground && data?.metadata === undefined && (
-              <Button
-                disabled={loadingPlayground}
-                key={data.id}
-                tabIndex={-1}
-                variant="outline"
-                size="sm"
-                className="gap-2 whitespace-nowrap"
-                data-testid={"playground-flow-button-" + data.id}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  setLoadingPlayground(true);
-                  if (getFlowById(data.id)) {
-                    setCurrentFlowId(data.id);
-                    setOpenPlayground(true);
-                    setLoadingPlayground(false);
-                  } else {
-                    getFlowData().then((res) => {
-                      setCurrentFlow(res);
+                </div>
+              )}
+              {button && button}
+              {playground && data?.metadata === undefined && (
+                <Button
+                  disabled={loadingPlayground}
+                  key={data.id}
+                  tabIndex={-1}
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 whitespace-nowrap"
+                  data-testid={"playground-flow-button-" + data.id}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setLoadingPlayground(true);
+                    if (getFlowById(data.id)) {
+                      setCurrentFlowId(data.id);
                       setOpenPlayground(true);
                       setLoadingPlayground(false);
-                    });
-                  }
-                }}
-              >
-                {!loadingPlayground ? (
-                  <IconComponent
-                    name="BotMessageSquareIcon"
-                    className="h-4 w-4 select-none"
-                  />
-                ) : (
-                  <Loading className="h-4 w-4 text-medium-indigo" />
-                )}
-                Playground
-              </Button>
-            )}
-            {openPlayground && (
-              <IOModal
-                cleanOnClose={true}
-                open={openPlayground}
-                setOpen={setOpenPlayground}
-              >
-                <></>
-              </IOModal>
-            )}
+                    } else {
+                      getFlowData().then((res) => {
+                        setCurrentFlow(res);
+                        setOpenPlayground(true);
+                        setLoadingPlayground(false);
+                      });
+                    }
+                  }}
+                >
+                  {!loadingPlayground ? (
+                    <IconComponent
+                      name="BotMessageSquareIcon"
+                      className="h-4 w-4 select-none"
+                    />
+                  ) : (
+                    <Loading className="h-4 w-4 text-medium-indigo" />
+                  )}
+                  Playground
+                </Button>
+              )}
+            </div>
           </div>
-        </div>
-      </CardFooter>
-    </Card>
+        </CardFooter>
+      </Card>
+      {openPlayground && (
+        <IOModal
+          cleanOnClose={true}
+          open={openPlayground}
+          setOpen={setOpenPlayground}
+        >
+          <></>
+        </IOModal>
+      )}
+    </>
   );
 }
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 93fdd5d41..46b934198 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -128,7 +128,7 @@ export default function IOModal({
         <div className="flex items-center">
           <span className="pr-2">Playground</span>
           <IconComponent
-            name="Zap"
+            name="BotMessageSquareIcon"
             className="h-6 w-6 pl-1 text-foreground"
             aria-hidden="true"
           />

From 4726341ec849d9f1e45ab505ee3de7080df1cb07 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 30 Apr 2024 22:01:29 -0300
Subject: [PATCH 105/142] =?UTF-8?q?=F0=9F=93=9D=20(inputGlobalComponent/in?=
 =?UTF-8?q?dex.tsx):=20remove=20unnecessary=20console.log=20statement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/components/inputGlobalComponent/index.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 0f0097fcf..d86d41c86 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -85,9 +85,6 @@ export default function InputGlobalComponent({
       });
     }
   }
-
-  console.log(data.node?.template[name], data.node?.template[name].password);
-
   return (
     <InputComponent
       id={"input-" + name}

From a551308297cfd750d33aebab92d66aeeb4d66439 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 1 May 2024 05:12:26 +0200
Subject: [PATCH 106/142] Added playground button on Store card

---
 .../src/components/cardComponent/index.tsx    | 140 ++++++++----------
 1 file changed, 65 insertions(+), 75 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 1a5a641d9..20f44cbde 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -249,31 +249,22 @@ export default function CollectionCardComponent({
                 )}
               </CardTitle>
             </div>
-            {data.user_created && data.user_created.username && (
-              <span className="text-sm text-primary">
-                by <b>{data.user_created.username}</b>
-                {data.last_tested_version && (
-                  <>
-                    {" "}
-                    |{" "}
-                    <span className="text-xs">
+            <div className="flex gap-2">
+              {data.user_created && data.user_created.username && (
+                <span className="text-sm text-primary">
+                  by <b>{data.user_created.username}</b>
+                  {data.last_tested_version && (
+                    <>
                       {" "}
-                      ⛓︎ v{data.last_tested_version}
-                    </span>
-                  </>
-                )}
-              </span>
-            )}
-
-            <CardDescription className="pb-2 pt-2">
-              <div className="truncate-doubleline">{data.description}</div>
-            </CardDescription>
-          </CardHeader>
-        </div>
-
-        <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">
+                      |{" "}
+                      <span className="text-xs">
+                        {" "}
+                        ⛓︎ v{data.last_tested_version}
+                      </span>
+                    </>
+                  )}
+                </span>
+              )}
               <div className="flex w-full flex-1 flex-wrap gap-2">
                 {data.tags &&
                   data.tags.length > 0 &&
@@ -288,59 +279,58 @@ export default function CollectionCardComponent({
                     </Badge>
                   ))}
               </div>
+            </div>
+
+            <CardDescription className="pb-2 pt-2">
+              <div className="truncate-doubleline">{data.description}</div>
+            </CardDescription>
+          </CardHeader>
+        </div>
+
+        <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">
+              {playground && data?.metadata !== undefined ? (
+                <Button
+                  disabled={loadingPlayground}
+                  key={data.id}
+                  tabIndex={-1}
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 whitespace-nowrap"
+                  data-testid={"playground-flow-button-" + data.id}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setLoadingPlayground(true);
+                    if (getFlowById(data.id)) {
+                      setCurrentFlowId(data.id);
+                      setOpenPlayground(true);
+                      setLoadingPlayground(false);
+                    } else {
+                      getFlowData().then((res) => {
+                        setCurrentFlow(res);
+                        setOpenPlayground(true);
+                        setLoadingPlayground(false);
+                      });
+                    }
+                  }}
+                >
+                  {!loadingPlayground ? (
+                    <IconComponent
+                      name="BotMessageSquareIcon"
+                      className="h-4 w-4 select-none"
+                    />
+                  ) : (
+                    <Loading className="h-4 w-4 text-medium-indigo" />
+                  )}
+                  Playground
+                </Button>
+              ) : (
+                <div></div>
+              )}
               {data.liked_by_count != undefined && (
                 <div className="flex gap-0.5">
-                  {playground && data?.metadata !== undefined && (
-                    <ShadTooltip
-                      content={
-                        authorized
-                          ? "Playground"
-                          : "Please review your API key."
-                      }
-                    >
-                      <Button
-                        disabled={loadingLike}
-                        variant="ghost"
-                        size="icon"
-                        className={
-                          "whitespace-nowrap" +
-                          (!authorized ? " cursor-not-allowed" : "")
-                        }
-                        onClick={(e) => {
-                          if (!authorized) {
-                            return;
-                          }
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setLoadingPlayground(true);
-                          if (getFlowById(data.id)) {
-                            setCurrentFlowId(data.id);
-                            setOpenPlayground(true);
-                            setLoadingPlayground(false);
-                          } else {
-                            getFlowData().then((res) => {
-                              setCurrentFlow(res);
-                              setOpenPlayground(true);
-                              setLoadingPlayground(false);
-                            });
-                          }
-                        }}
-                        data-testid={`playground-${data.name}`}
-                      >
-                        {!loadingPlayground ? (
-                          <IconComponent
-                            name="BotMessageSquareIcon"
-                            className={cn(
-                              "h-5 w-5 select-none",
-                              !authorized ? " text-ring" : ""
-                            )}
-                          />
-                        ) : (
-                          <Loading className="h-4 w-4 select-none text-medium-indigo" />
-                        )}
-                      </Button>
-                    </ShadTooltip>
-                  )}
                   {onDelete && data?.metadata !== undefined ? (
                     <ShadTooltip
                       content={

From ee6faf5a905232badacdfd06749e375739ab4738 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 1 May 2024 05:17:49 +0200
Subject: [PATCH 107/142] Fixed gradient selector not appearing with autologin
 on

---
 .../src/pages/SettingsPage/pages/GeneralPage/index.tsx      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index ac2af4f75..7ece3678b 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -113,8 +113,7 @@ export default function GeneralPage() {
       </div>
 
       <div className="grid gap-6">
-        {!autoLogin && (
-          <>
+        
             <Form.Root
               onSubmit={(event) => {
                 handlePatchGradient();
@@ -152,7 +151,7 @@ export default function GeneralPage() {
                   </Form.Submit>
                 </CardFooter>
               </Card>
-            </Form.Root>
+            </Form.Root>{!autoLogin && (
             <Form.Root
               onSubmit={(event) => {
                 handlePatchPassword();
@@ -218,7 +217,6 @@ export default function GeneralPage() {
                 </CardFooter>
               </Card>
             </Form.Root>
-          </>
         )}
       </div>
     </div>

From 0dc5cff33e85d20e81d6df4d46a8faeab68c983d Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 1 May 2024 11:41:51 -0300
Subject: [PATCH 108/142] Add id search from search string

---
 .../base/langflow/services/store/service.py   | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/backend/base/langflow/services/store/service.py b/src/backend/base/langflow/services/store/service.py
index b25599297..4e557fcf4 100644
--- a/src/backend/base/langflow/services/store/service.py
+++ b/src/backend/base/langflow/services/store/service.py
@@ -49,6 +49,27 @@ async def user_data_context(store_service: "StoreService", api_key: Optional[str
         user_data_var.set(None)
 
 
+def get_id_from_search_string(search_string: str) -> Optional[str]:
+    """
+    Extracts the ID from a search string.
+
+    Args:
+        search_string (str): The search string to extract the ID from.
+
+    Returns:
+        Optional[str]: The extracted ID, or None if no ID is found.
+    """
+    possible_id = search_string
+    if "www.langflow.store/store/" in search_string:
+        possible_id = search_string.split("/")[-1]
+
+    try:
+        possible_id = UUID(search_string)
+    except ValueError:
+        possible_id = None
+    return possible_id
+
+
 class StoreService(Service):
     """This is a service that integrates langflow with the store which
     is a Directus instance. It allows to search, get and post components to
@@ -183,7 +204,10 @@ class StoreService(Service):
     ):
         filter_conditions = []
 
-        if search is not None:
+        if component_id is None:
+            component_id = get_id_from_search_string(search) if search else None
+
+        if search is not None and component_id is None:
             search_conditions = self.build_search_filter_conditions(search)
             filter_conditions.append(search_conditions)
 

From 08797ee5928115a7b6a6b2e158fb674b7c64ab35 Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Wed, 1 May 2024 22:37:26 -0300
Subject: [PATCH 109/142] Refactor TextOperatorComponent in TextOperator.py to
 improve code readability and maintainability

---
 .../components/experimental/TextOperator.py   | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/backend/base/langflow/components/experimental/TextOperator.py

diff --git a/src/backend/base/langflow/components/experimental/TextOperator.py b/src/backend/base/langflow/components/experimental/TextOperator.py
new file mode 100644
index 000000000..d21d7b7cb
--- /dev/null
+++ b/src/backend/base/langflow/components/experimental/TextOperator.py
@@ -0,0 +1,55 @@
+from langflow.interface.custom.custom_component import CustomComponent
+from langflow.schema import Record
+from langflow.field_typing import Text
+
+class TextOperatorComponent(CustomComponent):
+    display_name = "Text Operator"
+    description = "Compares two text inputs based on a specified condition such as equality or inequality, with optional case sensitivity."
+
+    def build_config(self) -> dict:
+        return {
+            "input_text": {
+                "display_name": "Input Text",
+                "info": "The primary text input for the operation.",
+            },
+            "match_text": {
+                "display_name": "Match Text",
+                "info": "The text input to compare against.",
+            },
+            "operator": {
+                "display_name": "Operator",
+                "info": "The operator to apply for comparing the texts.",
+                "options": ["equals", "not equals", "contains", "starts with", "ends with"],
+            },
+            "case_sensitive": {
+                "display_name": "Case Sensitive",
+                "info": "If true, the comparison will be case sensitive.",
+                "field_type": "bool",
+                "default": False,
+            }
+        }
+
+    def build(self, input_text: Text, match_text: Text, operator: Text, case_sensitive: bool = False) -> Text:
+        if not input_text or not match_text:
+            raise ValueError("Both 'input_text' and 'match_text' must be provided and non-empty.")
+
+        if not case_sensitive:
+            input_text = input_text.lower()
+            match_text = match_text.lower()
+
+        result = False
+        if operator == "equals":
+            result = input_text == match_text
+        elif operator == "not equals":
+            result = input_text != match_text
+        elif operator == "contains":
+            result = match_text in input_text
+        elif operator == "starts with":
+            result = input_text.startswith(match_text)
+        elif operator == "ends with":
+            result = input_text.endswith(match_text)
+
+        if not result:
+            self.stop()
+        self.status = f"{result} \n\n {input_text}"
+        return input_text

From 0cee24dfbed39697486bb485ef08ac66eec9c30e Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 2 May 2024 14:53:50 +0200
Subject: [PATCH 110/142] Added error handling to allow ID to be searchable

---
 src/frontend/src/pages/StorePage/index.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 4bc482f56..9c2f9cba3 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -9,7 +9,7 @@ import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { TagsSelector } from "../../components/tagsSelectorComponent";
 import { Badge } from "../../components/ui/badge";
 import {
@@ -65,6 +65,8 @@ export default function StorePage(): JSX.Element {
   const [searchNow, setSearchNow] = useState("");
   const [selectFilter, setSelectFilter] = useState("all");
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (!loadingApiKey) {
       if (!hasApiKey) {
@@ -149,6 +151,11 @@ export default function StorePage(): JSX.Element {
       .catch((err) => {
         if (err.response?.status === 403 || err.response?.status === 401) {
           setValidApiKey(false);
+        } else if (
+          err.response?.data?.detail ===
+          "Unexpected error: Object of type UUID is not JSON serializable"
+        ) {
+          navigate("/store/" + inputText);
         } else {
           setSearchData([]);
           setTotalRowsCount(0);
@@ -371,7 +378,10 @@ export default function StorePage(): JSX.Element {
                       data={item}
                       authorized={validApiKey}
                       disabled={loading}
-                      playground={item.last_tested_version?.includes("1.0.0")&& !item.is_component}
+                      playground={
+                        item.last_tested_version?.includes("1.0.0") &&
+                        !item.is_component
+                      }
                     />
                   </>
                 );

From 1df3fe7ad6e52ac4075118b9e906ef0e2a840922 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 11:39:41 -0300
Subject: [PATCH 111/142] =?UTF-8?q?=F0=9F=93=9D=20(StringListInput.py):=20?=
 =?UTF-8?q?update=20parameter=20name=20from=20"param"=20to=20"input=5Fvalu?=
 =?UTF-8?q?e"=20to=20improve=20clarity=20and=20consistency=20=F0=9F=93=9D?=
 =?UTF-8?q?=20(StringListOutput.py):=20update=20parameter=20name=20from=20?=
 =?UTF-8?q?"param"=20to=20"input=5Fvalue"=20to=20improve=20clarity=20and?=
 =?UTF-8?q?=20consistency=20=F0=9F=93=9D=20(index.tsx):=20add=20InputListC?=
 =?UTF-8?q?omponent=20to=20handle=20StringListInput=20and=20StringListOutp?=
 =?UTF-8?q?ut=20components=20in=20IOFieldView=20=F0=9F=93=9D=20(index.tsx)?=
 =?UTF-8?q?:=20update=20InputListComponent=20props=20to=20include=20value,?=
 =?UTF-8?q?=20onChange,=20disabled,=20and=20playgroundDisabled=20?=
 =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20update=20IOFieldView=20to=20rende?=
 =?UTF-8?q?r=20InputListComponent=20for=20StringListInput=20and=20StringLi?=
 =?UTF-8?q?stOutput=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/inputs/StringListInput.py      |  6 ++--
 .../components/outputs/StringListOutput.py    |  6 ++--
 .../components/inputListComponent/index.tsx   | 13 +++++--
 .../IOModal/components/IOFieldView/index.tsx  | 34 +++++++++++++++++--
 src/frontend/src/types/components/index.ts    |  1 +
 5 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/backend/base/langflow/components/inputs/StringListInput.py b/src/backend/base/langflow/components/inputs/StringListInput.py
index 1fef86be1..5eadce9bc 100644
--- a/src/backend/base/langflow/components/inputs/StringListInput.py
+++ b/src/backend/base/langflow/components/inputs/StringListInput.py
@@ -7,7 +7,7 @@ class StringListInput(CustomComponent):
     display_name = "String List Input"
 
     def build_config(self):
-        return {"param": {"display_name": "String List Input", "field_type": "str", "list": True}}
+        return {"input_value": {"display_name": "String List Input", "field_type": "str", "list": True}}
 
-    def build(self, param: list) -> Record:
-        return Record(data=param)
+    def build(self, input_value: list) -> Record:
+        return Record(data=input_value)
diff --git a/src/backend/base/langflow/components/outputs/StringListOutput.py b/src/backend/base/langflow/components/outputs/StringListOutput.py
index 9e5384986..3b1ff6088 100644
--- a/src/backend/base/langflow/components/outputs/StringListOutput.py
+++ b/src/backend/base/langflow/components/outputs/StringListOutput.py
@@ -7,7 +7,7 @@ class StringListOutput(CustomComponent):
     display_name = "String List Output"
 
     def build_config(self):
-        return {"param": {"display_name": "String List Output", "field_type": "str", "list": True}}
+        return {"input_value": {"display_name": "String List Output", "field_type": "str", "list": True}}
 
-    def build(self, param: list) -> Record:
-        return Record(data=param)
+    def build(self, input_value: list) -> Record:
+        return Record(data=input_value)
\ No newline at end of file
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index b43c6df86..f0aa8cca7 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -12,6 +12,7 @@ export default function InputListComponent({
   disabled,
   editNode = false,
   componentName,
+  playgroundDisabled,
 }: InputListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled && value.length > 0 && value[0] !== "") {
@@ -24,7 +25,7 @@ export default function InputListComponent({
     value = [value];
   }
 
-  if (!value.length) value = [""];
+  if (!value?.length) value = [""];
 
   return (
     <div
@@ -37,7 +38,7 @@ export default function InputListComponent({
         return (
           <div key={idx} className="flex w-full gap-3">
             <Input
-              disabled={disabled}
+              disabled={disabled || playgroundDisabled}
               type="text"
               value={singleValue}
               className={editNode ? "input-edit-node" : ""}
@@ -64,6 +65,7 @@ export default function InputListComponent({
                     editNode ? "-edit" : ""
                   }_${componentName}-` + idx
                 }
+                disabled={disabled || playgroundDisabled}
               >
                 <IconComponent
                   name="Plus"
@@ -82,10 +84,15 @@ export default function InputListComponent({
                   newInputList.splice(idx, 1);
                   onChange(newInputList);
                 }}
+                disabled={disabled || playgroundDisabled}
               >
                 <IconComponent
                   name="X"
-                  className="h-4 w-4 hover:text-status-red"
+                  className={`h-4 w-4 ${
+                    disabled || playgroundDisabled
+                      ? ""
+                      : "hover:text-accent-foreground"
+                  }`}
                 />
               </button>
             )}
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
index 7605f2438..36d8be382 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
@@ -2,6 +2,7 @@ import { cloneDeep } from "lodash";
 import { useState } from "react";
 import ImageViewer from "../../../../components/ImageViewer";
 import CsvOutputComponent from "../../../../components/csvOutputComponent";
+import InputListComponent from "../../../../components/inputListComponent";
 import PdfViewer from "../../../../components/pdfViewer";
 import {
   Select,
@@ -121,7 +122,21 @@ export default function IOFieldView({
             );
 
           case "StringListInput":
-            return <>diusahjduisahudsa</>;
+            return (
+              <>
+                <InputListComponent
+                  value={node.data.node!.template["input_value"]?.value}
+                  onChange={(e) => {
+                    if (node) {
+                      let newNode = cloneDeep(node);
+                      newNode.data.node!.template["input_value"].value = e;
+                      setNode(node.id, newNode);
+                    }
+                  }}
+                  disabled={false}
+                />
+              </>
+            );
 
           default:
             return (
@@ -249,7 +264,22 @@ export default function IOFieldView({
             );
 
           case "StringListOutput":
-            return <>diusahjduisahudsa</>;
+            return (
+              <>
+                <InputListComponent
+                  value={node.data.node!.template["input_value"]?.value}
+                  onChange={(e) => {
+                    if (node) {
+                      let newNode = cloneDeep(node);
+                      newNode.data.node!.template["input_value"].value = e;
+                      setNode(node.id, newNode);
+                    }
+                  }}
+                  playgroundDisabled
+                  disabled={false}
+                />
+              </>
+            );
 
           default:
             return (
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 7ebda61fa..9c085be48 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -69,6 +69,7 @@ export type InputListComponentType = {
   disabled: boolean;
   editNode?: boolean;
   componentName?: string;
+  playgroundDisabled?: boolean;
 };
 
 export type InputGlobalComponentType = {

From e3edc54d64ac50756cb73db661ce9366bc728007 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 12:56:57 -0300
Subject: [PATCH 112/142] Refactor get_id_from_search_string function to
 convert UUID to string in service.py

---
 src/backend/base/langflow/services/store/service.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/base/langflow/services/store/service.py b/src/backend/base/langflow/services/store/service.py
index 4e557fcf4..c6205269a 100644
--- a/src/backend/base/langflow/services/store/service.py
+++ b/src/backend/base/langflow/services/store/service.py
@@ -64,7 +64,7 @@ def get_id_from_search_string(search_string: str) -> Optional[str]:
         possible_id = search_string.split("/")[-1]
 
     try:
-        possible_id = UUID(search_string)
+        possible_id = str(UUID(search_string))
     except ValueError:
         possible_id = None
     return possible_id

From 0648e3f2ac7b897ebcc5a8af96aede5695d2aeb7 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 13:50:01 -0300
Subject: [PATCH 113/142] Update component descriptions to reflect Playground
 instead of Interaction Panel

---
 docs/docs/components/inputs.mdx               |   4 +-
 .../docs/getting-started/rag-with-astradb.mdx |  12 +--
 docs/docs/guides/rag-with-astradb.mdx         |  12 +--
 docs/docs/index.mdx                           |   2 +-
 docs/docs/migration/inputs-and-outputs.mdx    |  10 +-
 .../docs/whats-new/a-new-chapter-langflow.mdx |  10 +-
 .../whats-new/migrating-to-one-point-zero.mdx |   2 +-
 docs/static/data/AstraDB-RAG-Flows.json       |  12 +--
 .../langflow/components/inputs/ChatInput.py   |   2 +-
 .../langflow/components/inputs/TextInput.py   |   2 +-
 .../langflow/components/outputs/ChatOutput.py |   2 +-
 .../langflow/components/outputs/TextOutput.py |   2 +-
 .../Basic Prompting (Hello, world!).json      |   8 +-
 .../Langflow Blog Writter.json                |   8 +-
 .../Langflow Document QA.json                 |   8 +-
 .../Langflow Memory Conversation.json         |  12 +--
 .../Langflow Prompt Chaining.json             |  20 ++--
 .../VectorStore-RAG-Flows.json                |  12 +--
 .../tests/end-to-end/assets/ChatTest.json     | 101 +++++++++++++-----
 19 files changed, 147 insertions(+), 94 deletions(-)

diff --git a/docs/docs/components/inputs.mdx b/docs/docs/components/inputs.mdx
index fe8804e43..bc0ddcb0f 100644
--- a/docs/docs/components/inputs.mdx
+++ b/docs/docs/components/inputs.mdx
@@ -47,7 +47,7 @@ If you expose all its fields, it will look like the image below.
   style={{ width: "40%", margin: "20px auto" }}
 />
 
-One key capability of the Chat Input component is how it transforms the Interaction Panel into a chat window. This feature is particularly useful for scenarios where user input is required to initiate or influence the flow.
+One key capability of the Chat Input component is how it transforms the Playground into a chat window. This feature is particularly useful for scenarios where user input is required to initiate or influence the flow.
 
 <ZoomableImage
   alt="Docusaurus themed image"
@@ -152,7 +152,7 @@ You can use a template like this: _`"Name: {name}, Age: {age}"`_ to convert the
   style={{ width: "50%", margin: "20px auto" }}
 />
 
-The Text Input component gives you the possibility to add an Input field on the Interaction Panel. This is useful because it allows you to define parameters while running and testing your flow.
+The Text Input component gives you the possibility to add an Input field on the Playground. This is useful because it allows you to define parameters while running and testing your flow.
 
 <ZoomableImage
   alt="Docusaurus themed image"
diff --git a/docs/docs/getting-started/rag-with-astradb.mdx b/docs/docs/getting-started/rag-with-astradb.mdx
index 01daa7b6f..8cb2593c9 100644
--- a/docs/docs/getting-started/rag-with-astradb.mdx
+++ b/docs/docs/getting-started/rag-with-astradb.mdx
@@ -130,18 +130,18 @@ And run it! This will ingest the Text data from your file into the Astra DB data
   style={{ width: "80%", margin: "20px auto" }}
 />
 
-Now, on to the **RAG Flow**. This flow is responsible for generating responses to your queries. It will define all of the steps from getting the User's input to generating a response and displaying it in the Interaction Panel.
+Now, on to the **RAG Flow**. This flow is responsible for generating responses to your queries. It will define all of the steps from getting the User's input to generating a response and displaying it in the Playground.
 
 The RAG flow is a bit more complex. It consists of:
 
-- **Chat Input** component that defines where to put the user input coming from the Interaction Panel
+- **Chat Input** component that defines where to put the user input coming from the Playground
 - **OpenAI Embeddings** component that generates embeddings from the user input
 - **Astra DB Search** component that retrieves the most relevant Records from the Astra DB database
-- **Text Output** component that turns the Records into Text by concatenating them and also displays it in the Interaction Panel
-  - One interesting point you'll see here is that this component is named `Extracted Chunks`, and that is how it will appear in the Interaction Panel
+- **Text Output** component that turns the Records into Text by concatenating them and also displays it in the Playground
+  - One interesting point you'll see here is that this component is named `Extracted Chunks`, and that is how it will appear in the Playground
 - **Prompt** component that takes in the user input and the retrieved Records as text and builds a prompt for the OpenAI model
 - **OpenAI** component that generates a response to the prompt
-- **Chat Output** component that displays the response in the Interaction Panel
+- **Chat Output** component that displays the response in the Playground
 
 <ZoomableImage
   alt="Docusaurus themed image"
@@ -163,7 +163,7 @@ To run it all we have to do is click on the ⚡ _Run_ button and start interacti
   style={{ width: "80%", margin: "20px auto" }}
 />
 
-This opens the Interaction Panel where you can chat your data.
+This opens the Playground where you can chat your data.
 
 Because this flow has a **Chat Input** and a **Text Output** component, the Panel displays a chat input at the bottom and the Extracted Chunks section on the left.
 
diff --git a/docs/docs/guides/rag-with-astradb.mdx b/docs/docs/guides/rag-with-astradb.mdx
index d04b0c698..09395c598 100644
--- a/docs/docs/guides/rag-with-astradb.mdx
+++ b/docs/docs/guides/rag-with-astradb.mdx
@@ -121,18 +121,18 @@ And run it! This will ingest the Text data from your file into the Astra DB data
   style={{ width: "80%", margin: "20px auto" }}
 />
 
-Now, on to the **RAG Flow**. This flow is responsible for generating responses to your queries. It will define all of the steps from getting the User's input to generating a response and displaying it in the Interaction Panel.
+Now, on to the **RAG Flow**. This flow is responsible for generating responses to your queries. It will define all of the steps from getting the User's input to generating a response and displaying it in the Playground.
 
 The RAG flow is a bit more complex. It consists of:
 
-- **Chat Input** component that defines where to put the user input coming from the Interaction Panel
+- **Chat Input** component that defines where to put the user input coming from the Playground
 - **OpenAI Embeddings** component that generates embeddings from the user input
 - **Astra DB Search** component that retrieves the most relevant Records from the Astra DB database
-- **Text Output** component that turns the Records into Text by concatenating them and also displays it in the Interaction Panel
-  - One interesting point you'll see here is that this component is named `Extracted Chunks`, and that is how it will appear in the Interaction Panel
+- **Text Output** component that turns the Records into Text by concatenating them and also displays it in the Playground
+  - One interesting point you'll see here is that this component is named `Extracted Chunks`, and that is how it will appear in the Playground
 - **Prompt** component that takes in the user input and the retrieved Records as text and builds a prompt for the OpenAI model
 - **OpenAI** component that generates a response to the prompt
-- **Chat Output** component that displays the response in the Interaction Panel
+- **Chat Output** component that displays the response in the Playground
 
 <ZoomableImage
   alt="Docusaurus themed image"
@@ -154,7 +154,7 @@ To run it all we have to do is click on the ⚡ _Run_ button and start interacti
   style={{ width: "80%", margin: "20px auto" }}
 />
 
-This opens the Interaction Panel where you can chat your data.
+This opens the Playground where you can chat your data.
 
 Because this flow has a **Chat Input** and a **Text Output** component, the Panel displays a chat input at the bottom and the Extracted Chunks section on the left.
 
diff --git a/docs/docs/index.mdx b/docs/docs/index.mdx
index 7ee26d0e0..d8820ea5c 100644
--- a/docs/docs/index.mdx
+++ b/docs/docs/index.mdx
@@ -82,7 +82,7 @@ From here, just name your Space, define the visibility (Public or Private), and
 
 Once you get Langflow running, click on New Project in the top right corner of the screen. Langflow provides a range of example flows to help you get started.
 
-To quickly try one of them, open a starter example, set up your API keys and click ⚡ Run, on the bottom right corner of the canvas. This will open up Langflow's Interaction Panel with the chat console, text inputs, and outputs.
+To quickly try one of them, open a starter example, set up your API keys and click ⚡ Run, on the bottom right corner of the canvas. This will open up Langflow's Playground with the chat console, text inputs, and outputs.
 
 ### 🖥️ Command Line Interface (CLI)
 
diff --git a/docs/docs/migration/inputs-and-outputs.mdx b/docs/docs/migration/inputs-and-outputs.mdx
index 5db3f3af2..1e1745347 100644
--- a/docs/docs/migration/inputs-and-outputs.mdx
+++ b/docs/docs/migration/inputs-and-outputs.mdx
@@ -1,7 +1,7 @@
 # Inputs and Outputs
 
 TL;DR: Inputs and Outputs are a category of components that are used to define where data comes in and out of your flow. They also
-dynamically change the Interaction Panel and can be renamed to make it easier to build and maintain your flows.
+dynamically change the Playground and can be renamed to make it easier to build and maintain your flows.
 
 ## Introduction
 
@@ -10,8 +10,8 @@ Langflow 1.0 introduces new categories of components called Inputs and Outputs.
 Let's start with what they have in common:
 
 - Components in these categories connect to components that have Text or Record inputs or outputs. Some can connect to both but you have to pick what type of data you want to output or input.
-- They can be renamed to help you identify them more easily in the Interaction Panel and while using the API.
-- They dynamically change the Interaction Panel to make it easier to understand and interact with your flows.
+- They can be renamed to help you identify them more easily in the Playground and while using the API.
+- They dynamically change the Playground to make it easier to understand and interact with your flows.
 
 Native Langflow Components were created to be powerful tools that work around Langflow's features. They are designed to be easy to use and understand, and to help you build your flows faster.
 
@@ -21,7 +21,7 @@ Let's dive into Inputs and Outputs.
 
 Inputs are components that are used to define where data comes into your flow. They can be used to receive data from the user, from a database, or from any other source that can be converted to Text or Record.
 
-The difference between Chat Input and other Input components is the format of the output, the number of configurable fields, and the way they are displayed in the Interaction Panel.
+The difference between Chat Input and other Input components is the format of the output, the number of configurable fields, and the way they are displayed in the Playground.
 
 Chat Input components can output Text or Record. When you want to pass the sender name, or sender to the next component, you can use the Record output, and when you want to pass the message only you can use the Text output. This is useful when saving the message to a database or a memory system like Zep.
 
@@ -29,7 +29,7 @@ You can find out more about it and the other Inputs [here](../components/inputs)
 
 ## Outputs
 
-Outputs are components that are used to define where data comes out of your flow. They can be used to send data to the user, to the Interaction Panel, or to define how the data will be displayed in the Interaction Panel.
+Outputs are components that are used to define where data comes out of your flow. They can be used to send data to the user, to the Playground, or to define how the data will be displayed in the Playground.
 
 The Chat Output works similarly to the Chat Input but does not have a field that allows for written input. It is used as an Output definition and can be used to send data to the user.
 
diff --git a/docs/docs/whats-new/a-new-chapter-langflow.mdx b/docs/docs/whats-new/a-new-chapter-langflow.mdx
index bc3e498ba..bec720384 100644
--- a/docs/docs/whats-new/a-new-chapter-langflow.mdx
+++ b/docs/docs/whats-new/a-new-chapter-langflow.mdx
@@ -36,18 +36,18 @@ The caveat is existing projects may need some new Components to get them back to
 ## Custom Interactions
 
 The moment we decided to make this change, we saw the potential to make Langflow even more yours.
-By having a clear definition of Inputs and Outputs, we could build the experience around that which led us to create the **Interaction Panel**.
+By having a clear definition of Inputs and Outputs, we could build the experience around that which led us to create the **Playground**.
 
-When building a project testing and debugging is crucial. The Interaction Panel is a tool that changes dynamically based on the Inputs and Outputs you defined in your project.
+When building a project testing and debugging is crucial. The Playground is a tool that changes dynamically based on the Inputs and Outputs you defined in your project.
 
 For example, let's say you are building a simple RAG application. Generally, you have an Input, some references that come from a Vector Store Search, a Prompt and the answer.
-Now, you could plug the output of your Prompt into a [Text Output](../components/outputs#Text-Output), rename that to "Prompt Result" and see the output of your Prompt in the Interaction Panel.
+Now, you could plug the output of your Prompt into a [Text Output](../components/outputs#Text-Output), rename that to "Prompt Result" and see the output of your Prompt in the Playground.
 
 {/* Add image here of the described above */}
 
-This is just one example of how the Interaction Panel can help you build and debug your projects.
+This is just one example of how the Playground can help you build and debug your projects.
 
-We have many planned features for the Interaction Panel, and we're excited to see how you use it and what you think of it.
+We have many planned features for the Playground, and we're excited to see how you use it and what you think of it.
 
 ## An easier start
 
diff --git a/docs/docs/whats-new/migrating-to-one-point-zero.mdx b/docs/docs/whats-new/migrating-to-one-point-zero.mdx
index c140bdf94..827f0e118 100644
--- a/docs/docs/whats-new/migrating-to-one-point-zero.mdx
+++ b/docs/docs/whats-new/migrating-to-one-point-zero.mdx
@@ -55,7 +55,7 @@ Langflow 1.0 continues to support LangChain while also introducing support for m
 
 **Guide coming soon**
 
-## Sidebar Redesign and Customizable Interaction Panel
+## Sidebar Redesign and Customizable Playground
 
 We've expanded on the chat experience by creating a customizable interaction panel that allows you to design a panel that fits your needs and interact with it. The sidebar has also been redesigned to provide a more intuitive and user-friendly experience. Explore the new sidebar and interaction panel features to enhance your workflow.
 
diff --git a/docs/static/data/AstraDB-RAG-Flows.json b/docs/static/data/AstraDB-RAG-Flows.json
index 5706a0fbf..363f71713 100644
--- a/docs/static/data/AstraDB-RAG-Flows.json
+++ b/docs/static/data/AstraDB-RAG-Flows.json
@@ -20,7 +20,7 @@
                                 "list": false,
                                 "show": true,
                                 "multiline": true,
-                                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                                 "fileTypes": [],
                                 "file_path": "",
                                 "password": false,
@@ -141,7 +141,7 @@
                             },
                             "_type": "CustomComponent"
                         },
-                        "description": "Get chat inputs from the Interaction Panel.",
+                        "description": "Get chat inputs from the Playground.",
                         "icon": "ChatInput",
                         "base_classes": [
                             "Text",
@@ -214,7 +214,7 @@
                                 "list": false,
                                 "show": true,
                                 "multiline": true,
-                                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                                 "fileTypes": [],
                                 "file_path": "",
                                 "password": false,
@@ -249,7 +249,7 @@
                             },
                             "_type": "CustomComponent"
                         },
-                        "description": "Display a text output in the Interaction Panel.",
+                        "description": "Display a text output in the Playground.",
                         "icon": "type",
                         "base_classes": [
                             "object",
@@ -1255,7 +1255,7 @@
                                 "list": false,
                                 "show": true,
                                 "multiline": true,
-                                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template,\n        )\n",
+                                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template,\n        )\n",
                                 "fileTypes": [],
                                 "file_path": "",
                                 "password": false,
@@ -1399,7 +1399,7 @@
                             },
                             "_type": "CustomComponent"
                         },
-                        "description": "Display a chat message in the Interaction Panel.",
+                        "description": "Display a chat message in the Playground.",
                         "icon": "ChatOutput",
                         "base_classes": [
                             "object",
diff --git a/src/backend/base/langflow/components/inputs/ChatInput.py b/src/backend/base/langflow/components/inputs/ChatInput.py
index 40c3267ab..40203851f 100644
--- a/src/backend/base/langflow/components/inputs/ChatInput.py
+++ b/src/backend/base/langflow/components/inputs/ChatInput.py
@@ -7,7 +7,7 @@ from langflow.schema import Record
 
 class ChatInput(ChatComponent):
     display_name = "Chat Input"
-    description = "Get chat inputs from the Interaction Panel."
+    description = "Get chat inputs from the Playground."
     icon = "ChatInput"
 
     def build_config(self):
diff --git a/src/backend/base/langflow/components/inputs/TextInput.py b/src/backend/base/langflow/components/inputs/TextInput.py
index c9cdee0b0..b2317678e 100644
--- a/src/backend/base/langflow/components/inputs/TextInput.py
+++ b/src/backend/base/langflow/components/inputs/TextInput.py
@@ -6,7 +6,7 @@ from langflow.field_typing import Text
 
 class TextInput(TextComponent):
     display_name = "Text Input"
-    description = "Get text inputs from the Interaction Panel."
+    description = "Get text inputs from the Playground."
     icon = "type"
 
     def build_config(self):
diff --git a/src/backend/base/langflow/components/outputs/ChatOutput.py b/src/backend/base/langflow/components/outputs/ChatOutput.py
index 888b85025..7994c9ded 100644
--- a/src/backend/base/langflow/components/outputs/ChatOutput.py
+++ b/src/backend/base/langflow/components/outputs/ChatOutput.py
@@ -7,7 +7,7 @@ from langflow.schema import Record
 
 class ChatOutput(ChatComponent):
     display_name = "Chat Output"
-    description = "Display a chat message in the Interaction Panel."
+    description = "Display a chat message in the Playground."
     icon = "ChatOutput"
 
     def build(
diff --git a/src/backend/base/langflow/components/outputs/TextOutput.py b/src/backend/base/langflow/components/outputs/TextOutput.py
index 8d14ee357..0d55621b2 100644
--- a/src/backend/base/langflow/components/outputs/TextOutput.py
+++ b/src/backend/base/langflow/components/outputs/TextOutput.py
@@ -6,7 +6,7 @@ from langflow.field_typing import Text
 
 class TextOutput(TextComponent):
     display_name = "Text Output"
-    description = "Display a text output in the Interaction Panel."
+    description = "Display a text output in the Playground."
     icon = "type"
 
     def build_config(self):
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, world!).json b/src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, world!).json
index fce13f449..adda95d44 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, world!).json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, world!).json	
@@ -421,7 +421,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -565,7 +565,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "Record",
@@ -621,7 +621,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -742,7 +742,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
             "base_classes": [
               "object",
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Langflow Blog Writter.json b/src/backend/base/langflow/initial_setup/starter_projects/Langflow Blog Writter.json
index 8aa19c3df..178b7a6b3 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Langflow Blog Writter.json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Langflow Blog Writter.json	
@@ -278,7 +278,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -422,7 +422,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "Text",
@@ -836,7 +836,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextInput(TextComponent):\n    display_name = \"Text Input\"\n    description = \"Get text inputs from the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as input.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Optional[str] = \"\",\n        record_template: Optional[str] = \"\",\n    ) -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextInput(TextComponent):\n    display_name = \"Text Input\"\n    description = \"Get text inputs from the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as input.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Optional[str] = \"\",\n        record_template: Optional[str] = \"\",\n    ) -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -894,7 +894,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get text inputs from the Interaction Panel.",
+            "description": "Get text inputs from the Playground.",
             "icon": "type",
             "base_classes": [
               "object",
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Langflow Document QA.json b/src/backend/base/langflow/initial_setup/starter_projects/Langflow Document QA.json
index 8291b96b4..c8713d49e 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Langflow Document QA.json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Langflow Document QA.json	
@@ -277,7 +277,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -398,7 +398,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
             "base_classes": [
               "str",
@@ -453,7 +453,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -575,7 +575,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "str",
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Langflow Memory Conversation.json b/src/backend/base/langflow/initial_setup/starter_projects/Langflow Memory Conversation.json
index 69d5c61d5..5cee452e4 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Langflow Memory Conversation.json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Langflow Memory Conversation.json	
@@ -22,7 +22,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -144,7 +144,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
             "base_classes": [
               "Text",
@@ -199,7 +199,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -322,7 +322,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "Text",
@@ -1032,7 +1032,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -1067,7 +1067,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a text output in the Interaction Panel.",
+            "description": "Display a text output in the Playground.",
             "icon": "type",
             "base_classes": [
               "str",
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Langflow Prompt Chaining.json b/src/backend/base/langflow/initial_setup/starter_projects/Langflow Prompt Chaining.json
index 690c22e1e..e4f6b2d2c 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/Langflow Prompt Chaining.json	
+++ b/src/backend/base/langflow/initial_setup/starter_projects/Langflow Prompt Chaining.json	
@@ -256,7 +256,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -400,7 +400,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "object",
@@ -452,7 +452,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -596,7 +596,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "object",
@@ -647,7 +647,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextInput(TextComponent):\n    display_name = \"Text Input\"\n    description = \"Get text inputs from the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as input.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Optional[Text] = \"\",\n        record_template: Optional[str] = \"\",\n    ) -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextInput(TextComponent):\n    display_name = \"Text Input\"\n    description = \"Get text inputs from the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as input.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Optional[Text] = \"\",\n        record_template: Optional[str] = \"\",\n    ) -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -705,7 +705,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get text inputs from the Interaction Panel.",
+            "description": "Get text inputs from the Playground.",
             "icon": "type",
             "base_classes": [
               "str",
@@ -778,7 +778,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -813,7 +813,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a text output in the Interaction Panel.",
+            "description": "Display a text output in the Playground.",
             "icon": "type",
             "base_classes": [
               "str",
@@ -1165,7 +1165,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -1200,7 +1200,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a text output in the Interaction Panel.",
+            "description": "Display a text output in the Playground.",
             "icon": "type",
             "base_classes": [
               "str",
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/VectorStore-RAG-Flows.json b/src/backend/base/langflow/initial_setup/starter_projects/VectorStore-RAG-Flows.json
index 69ac26c77..93a7c3998 100644
--- a/src/backend/base/langflow/initial_setup/starter_projects/VectorStore-RAG-Flows.json
+++ b/src/backend/base/langflow/initial_setup/starter_projects/VectorStore-RAG-Flows.json
@@ -20,7 +20,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -141,7 +141,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
             "base_classes": [
               "Text",
@@ -214,7 +214,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Interaction Panel.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
+                "value": "from typing import Optional\n\nfrom langflow.base.io.text import TextComponent\nfrom langflow.field_typing import Text\n\n\nclass TextOutput(TextComponent):\n    display_name = \"Text Output\"\n    description = \"Display a text output in the Playground.\"\n    icon = \"type\"\n\n    def build_config(self):\n        return {\n            \"input_value\": {\n                \"display_name\": \"Value\",\n                \"input_types\": [\"Record\", \"Text\"],\n                \"info\": \"Text or Record to be passed as output.\",\n            },\n            \"record_template\": {\n                \"display_name\": \"Record Template\",\n                \"multiline\": True,\n                \"info\": \"Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(self, input_value: Optional[Text] = \"\", record_template: str = \"\") -> Text:\n        return super().build(input_value=input_value, record_template=record_template)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -249,7 +249,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a text output in the Interaction Panel.",
+            "description": "Display a text output in the Playground.",
             "icon": "type",
             "base_classes": [
               "object",
@@ -1256,7 +1256,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -1400,7 +1400,7 @@
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
             "base_classes": [
               "object",
diff --git a/src/frontend/tests/end-to-end/assets/ChatTest.json b/src/frontend/tests/end-to-end/assets/ChatTest.json
index f29d398d1..cadb3fe12 100644
--- a/src/frontend/tests/end-to-end/assets/ChatTest.json
+++ b/src/frontend/tests/end-to-end/assets/ChatTest.json
@@ -5,7 +5,10 @@
       {
         "id": "ChatOutput-xPeM1",
         "type": "genericNode",
-        "position": { "x": 231.45405028405742, "y": -109.00715949940081 },
+        "position": {
+          "x": 231.45405028405742,
+          "y": -109.00715949940081
+        },
         "data": {
           "type": "ChatOutput",
           "node": {
@@ -17,7 +20,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Interaction Panel.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatOutput(ChatComponent):\n    display_name = \"Chat Output\"\n    description = \"Display a chat message in the Playground.\"\n    icon = \"ChatOutput\"\n\n    def build(\n        self,\n        sender: Optional[str] = \"Machine\",\n        sender_name: Optional[str] = \"AI\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n        record_template: Optional[str] = \"{text}\",\n    ) -> Union[Text, Record]:\n        return super().build_with_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n            record_template=record_template or \"\",\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -41,7 +44,9 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                "input_types": ["Text"],
+                "input_types": [
+                  "Text"
+                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -65,7 +70,9 @@
                 "info": "In case of Message being a Record, this template will be used to convert it to text.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "return_record": {
                 "type": "bool",
@@ -97,7 +104,10 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                "options": ["Machine", "User"],
+                "options": [
+                  "Machine",
+                  "User"
+                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -105,7 +115,9 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "sender_name": {
                 "type": "str",
@@ -125,7 +137,9 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "session_id": {
                 "type": "str",
@@ -144,13 +158,20 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "_type": "CustomComponent"
             },
-            "description": "Display a chat message in the Interaction Panel.",
+            "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-            "base_classes": ["object", "Record", "str", "Text"],
+            "base_classes": [
+              "object",
+              "Record",
+              "str",
+              "Text"
+            ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -161,7 +182,10 @@
               "return_record": null,
               "record_template": null
             },
-            "output_types": ["Text", "Record"],
+            "output_types": [
+              "Text",
+              "Record"
+            ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -181,7 +205,10 @@
       {
         "id": "ChatInput-XYvUc",
         "type": "genericNode",
-        "position": { "x": -389.67919096408036, "y": 10.79598792234681 },
+        "position": {
+          "x": -389.67919096408036,
+          "y": 10.79598792234681
+        },
         "data": {
           "type": "ChatInput",
           "node": {
@@ -193,7 +220,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Interaction Panel.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
+                "value": "from typing import Optional, Union\n\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.field_typing import Text\nfrom langflow.schema import Record\n\n\nclass ChatInput(ChatComponent):\n    display_name = \"Chat Input\"\n    description = \"Get chat inputs from the Playground.\"\n    icon = \"ChatInput\"\n\n    def build_config(self):\n        build_config = super().build_config()\n        build_config[\"input_value\"] = {\n            \"input_types\": [],\n            \"display_name\": \"Message\",\n            \"multiline\": True,\n        }\n\n        return build_config\n\n    def build(\n        self,\n        sender: Optional[str] = \"User\",\n        sender_name: Optional[str] = \"User\",\n        input_value: Optional[str] = None,\n        session_id: Optional[str] = None,\n        return_record: Optional[bool] = False,\n    ) -> Union[Text, Record]:\n        return super().build_no_record(\n            sender=sender,\n            sender_name=sender_name,\n            input_value=input_value,\n            session_id=session_id,\n            return_record=return_record,\n        )\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -253,7 +280,10 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                "options": ["Machine", "User"],
+                "options": [
+                  "Machine",
+                  "User"
+                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -261,7 +291,9 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "sender_name": {
                 "type": "str",
@@ -281,7 +313,9 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "session_id": {
                 "type": "str",
@@ -300,13 +334,20 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": ["Text"]
+                "input_types": [
+                  "Text"
+                ]
               },
               "_type": "CustomComponent"
             },
-            "description": "Get chat inputs from the Interaction Panel.",
+            "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
-            "base_classes": ["object", "Record", "str", "Text"],
+            "base_classes": [
+              "object",
+              "Record",
+              "str",
+              "Text"
+            ],
             "display_name": "Chat Input",
             "documentation": "",
             "custom_fields": {
@@ -316,7 +357,10 @@
               "session_id": null,
               "return_record": null
             },
-            "output_types": ["Text", "Record"],
+            "output_types": [
+              "Text",
+              "Record"
+            ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -339,16 +383,25 @@
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-xPeM1",
-            "inputTypes": ["Text"],
+            "inputTypes": [
+              "Text"
+            ],
             "type": "str"
           },
           "sourceHandle": {
-            "baseClasses": ["object", "Record", "str", "Text"],
+            "baseClasses": [
+              "object",
+              "Record",
+              "str",
+              "Text"
+            ],
             "dataType": "ChatInput",
             "id": "ChatInput-XYvUc"
           }
         },
-        "style": { "stroke": "#555" },
+        "style": {
+          "stroke": "#555"
+        },
         "className": "stroke-gray-900 stroke-connection",
         "id": "reactflow__edge-ChatInput-XYvUc{œbaseClassesœ:[œobjectœ,œRecordœ,œstrœ,œTextœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-XYvUcœ}-ChatOutput-xPeM1{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-xPeM1œ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       }
@@ -363,4 +416,4 @@
   "name": "ChatTest",
   "last_tested_version": "1.0.0a14",
   "is_component": false
-}
+}
\ No newline at end of file

From 4657d95bde93d6e3717ae95b5d5d8a8f225d7103 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 2 May 2024 18:54:38 +0200
Subject: [PATCH 114/142] Removed workaround for IDs

---
 src/frontend/src/pages/StorePage/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 9c2f9cba3..c6be1445d 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -151,11 +151,6 @@ export default function StorePage(): JSX.Element {
       .catch((err) => {
         if (err.response?.status === 403 || err.response?.status === 401) {
           setValidApiKey(false);
-        } else if (
-          err.response?.data?.detail ===
-          "Unexpected error: Object of type UUID is not JSON serializable"
-        ) {
-          navigate("/store/" + inputText);
         } else {
           setSearchData([]);
           setTotalRowsCount(0);

From 2785a8bc3aa585482535eaca84b526fa78d985fa Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Thu, 2 May 2024 14:29:54 -0300
Subject: [PATCH 115/142] Refactor store_message function and add
 StoreMessageComponent (#1817)

* Refactor store_message function in chat.py and memory.py

* Refactor store_message function in chat.py and memory.py

* Add StoreMessageComponent to langflow components

* Refactor store_message function in chat.py and memory.py to require session_id, sender, and sender_name

* Refactor StoreMessageComponent to use Optional[str] for sender_name and session_id parameters

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
---
 src/backend/base/langflow/base/io/chat.py     | 37 ++++------------
 .../components/experimental/StoreMessage.py   | 44 +++++++++++++++++++
 src/backend/base/langflow/memory.py           | 38 ++++++++++++++++
 3 files changed, 91 insertions(+), 28 deletions(-)
 create mode 100644 src/backend/base/langflow/components/experimental/StoreMessage.py

diff --git a/src/backend/base/langflow/base/io/chat.py b/src/backend/base/langflow/base/io/chat.py
index ea24dc968..b3cb7c01d 100644
--- a/src/backend/base/langflow/base/io/chat.py
+++ b/src/backend/base/langflow/base/io/chat.py
@@ -1,10 +1,9 @@
-import warnings
 from typing import Optional, Union
 
 from langflow.field_typing import Text
 from langflow.helpers.record import records_to_text
 from langflow.interface.custom.custom_component import CustomComponent
-from langflow.memory import add_messages
+from langflow.memory import store_message
 from langflow.schema import Record
 
 
@@ -50,34 +49,16 @@ class ChatComponent(CustomComponent):
         sender: Optional[str] = None,
         sender_name: Optional[str] = None,
     ) -> list[Record]:
-        if not message:
-            warnings.warn("No message provided.")
-            return []
 
-        if not session_id or not sender or not sender_name:
-            raise ValueError("All of session_id, sender, and sender_name must be provided.")
-        if isinstance(message, Record):
-            record = message
-            record.data.update(
-                {
-                    "session_id": session_id,
-                    "sender": sender,
-                    "sender_name": sender_name,
-                }
-            )
-        else:
-            record = Record(
-                data={
-                    "text": message,
-                    "session_id": session_id,
-                    "sender": sender,
-                    "sender_name": sender_name,
-                },
-            )
+        records = store_message(
+            message,
+            session_id=session_id,
+            sender=sender,
+            sender_name=sender_name,
+        )
 
-        self.status = record
-        records = add_messages([record])
-        return records[0]
+        self.status = records
+        return records
 
     def build_with_record(
         self,
diff --git a/src/backend/base/langflow/components/experimental/StoreMessage.py b/src/backend/base/langflow/components/experimental/StoreMessage.py
new file mode 100644
index 000000000..ac50b78b4
--- /dev/null
+++ b/src/backend/base/langflow/components/experimental/StoreMessage.py
@@ -0,0 +1,44 @@
+from typing import List, Optional
+
+from langflow.interface.custom.custom_component import CustomComponent
+from langflow.memory import get_messages, store_message
+from langflow.schema import Record
+
+
+class StoreMessageComponent(CustomComponent):
+    display_name = "Store Message"
+    description = "Stores a chat message given a Session ID."
+    beta: bool = True
+
+    def build_config(self):
+        return {
+            "sender": {
+                "options": ["Machine", "User"],
+                "display_name": "Sender Type",
+            },
+            "sender_name": {"display_name": "Sender Name"},
+            "message": {"display_name": "Message"},
+            "session_id": {
+                "display_name": "Session ID",
+                "info": "Session ID of the chat history.",
+                "input_types": ["Text"],
+            },
+        }
+
+    def build(
+        self,
+        sender: str = "User",
+        sender_name: Optional[str] = None,
+        session_id: Optional[str] = None,
+        message: str = "",
+    ) -> List[Record]:
+
+        store_message(
+            sender=sender,
+            sender_name=sender_name,
+            session_id=session_id,
+            message=message,
+        )
+
+        self.status = get_messages(session_id=session_id)
+        return get_messages(session_id=session_id)
diff --git a/src/backend/base/langflow/memory.py b/src/backend/base/langflow/memory.py
index aea9b3000..15cf6d6d8 100644
--- a/src/backend/base/langflow/memory.py
+++ b/src/backend/base/langflow/memory.py
@@ -1,3 +1,4 @@
+import warnings
 from typing import Optional, Union
 
 from loguru import logger
@@ -51,6 +52,7 @@ def get_messages(
                 "sender": row.sender,
                 "sender_name": row.sender_name,
                 "session_id": row.session_id,
+                "timestamp": row.timestamp,
             },
         )
         records.append(record)
@@ -98,3 +100,39 @@ def delete_messages(session_id: str):
     """
     monitor_service = get_monitor_service()
     monitor_service.delete_messages(session_id)
+
+
+def store_message(
+    message: Union[str, Record],
+    session_id: Optional[str] = None,
+    sender: Optional[str] = None,
+    sender_name: Optional[str] = None,
+) -> list[Record]:
+
+    if not message:
+        warnings.warn("No message provided.")
+        return []
+
+    if not session_id or not sender or not sender_name:
+        raise ValueError("All of session_id, sender, and sender_name must be provided.")
+
+    if isinstance(message, Record):
+        record = message
+        record.data.update(
+            {
+                "session_id": session_id,
+                "sender": sender,
+                "sender_name": sender_name,
+            }
+        )
+    elif isinstance(message, str):
+        record = Record(
+            data={
+                "text": message,
+                "session_id": session_id,
+                "sender": sender,
+                "sender_name": sender_name,
+            },
+        )
+
+    return add_messages([record])

From ba513c1593c58417672597a12f96be51c659346d Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 2 May 2024 14:41:43 -0300
Subject: [PATCH 116/142] New lock

---
 poetry.lock | 306 ++++++++++++++++++++++++++--------------------------
 1 file changed, 153 insertions(+), 153 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index e5e53fe39..2b124cfe9 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -469,17 +469,17 @@ files = [
 
 [[package]]
 name = "boto3"
-version = "1.34.95"
+version = "1.34.96"
 description = "The AWS SDK for Python"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "boto3-1.34.95-py3-none-any.whl", hash = "sha256:e836b71d79671270fccac0a4d4c8ec239a6b82ea47c399b64675aa597d0ee63b"},
-    {file = "boto3-1.34.95.tar.gz", hash = "sha256:decf52f8d5d8a1b10c9ff2a0e96ee207ed79e33d2e53fdf0880a5cbef70785e0"},
+    {file = "boto3-1.34.96-py3-none-any.whl", hash = "sha256:fe3d039631074a96374a354764641b6623036b6ea15381b8a04ac0a193b8c1e0"},
+    {file = "boto3-1.34.96.tar.gz", hash = "sha256:42ea7d46688e7cb27259780b9da2cddcfaf2763ff5d327f4d54eac12edba8e72"},
 ]
 
 [package.dependencies]
-botocore = ">=1.34.95,<1.35.0"
+botocore = ">=1.34.96,<1.35.0"
 jmespath = ">=0.7.1,<2.0.0"
 s3transfer = ">=0.10.0,<0.11.0"
 
@@ -488,13 +488,13 @@ crt = ["botocore[crt] (>=1.21.0,<2.0a0)"]
 
 [[package]]
 name = "botocore"
-version = "1.34.95"
+version = "1.34.96"
 description = "Low-level, data-driven core of boto 3."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "botocore-1.34.95-py3-none-any.whl", hash = "sha256:ead5823e0dd6751ece5498cb979fd9abf190e691c8833bcac6876fd6ca261fa7"},
-    {file = "botocore-1.34.95.tar.gz", hash = "sha256:6bd76a2eadb42b91fa3528392e981ad5b4dfdee3968fa5b904278acf6cbf15ff"},
+    {file = "botocore-1.34.96-py3-none-any.whl", hash = "sha256:4c307f5772286f1ab58a91220ea8e180416a2ea0cc7e76983a6984e4ef8c212d"},
+    {file = "botocore-1.34.96.tar.gz", hash = "sha256:00e917cd8152d902a4771b9e1e4d0cf1ee096c90027ee35f2a76b6d394e2ada5"},
 ]
 
 [package.dependencies]
@@ -3671,13 +3671,13 @@ adal = ["adal (>=1.0.2)"]
 
 [[package]]
 name = "langchain"
-version = "0.1.16"
+version = "0.1.17"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain-0.1.16-py3-none-any.whl", hash = "sha256:bc074cc5e51fad79b9ead1572fc3161918d0f614a6c8f0460543d505ad249ac7"},
-    {file = "langchain-0.1.16.tar.gz", hash = "sha256:b6bce78f8c071baa898884accfff15c3d81da2f0dd86c20e2f4c80b41463f49f"},
+    {file = "langchain-0.1.17-py3-none-any.whl", hash = "sha256:f6c5b5fdb529545e6cafbb4ba099031508e621ba1ed7985cf078a597ade3458b"},
+    {file = "langchain-0.1.17.tar.gz", hash = "sha256:709b80afa00ae634dfc7042f3e4c20309267b21ffeacc7d7494d58bcae1862f7"},
 ]
 
 [package.dependencies]
@@ -3685,8 +3685,8 @@ aiohttp = ">=3.8.3,<4.0.0"
 async-timeout = {version = ">=4.0.0,<5.0.0", markers = "python_version < \"3.11\""}
 dataclasses-json = ">=0.5.7,<0.7"
 jsonpatch = ">=1.33,<2.0"
-langchain-community = ">=0.0.32,<0.1"
-langchain-core = ">=0.1.42,<0.2.0"
+langchain-community = ">=0.0.36,<0.1"
+langchain-core = ">=0.1.48,<0.2.0"
 langchain-text-splitters = ">=0.0.1,<0.1"
 langsmith = ">=0.1.17,<0.2.0"
 numpy = ">=1,<2"
@@ -3759,19 +3759,19 @@ langchain-core = ">=0.1.42,<0.2.0"
 
 [[package]]
 name = "langchain-community"
-version = "0.0.35"
+version = "0.0.36"
 description = "Community contributed LangChain integrations."
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_community-0.0.35-py3-none-any.whl", hash = "sha256:296c47dcddf8c3c565f41240dc21421620f309ae24db762a5bdaf0c19cbb01ef"},
-    {file = "langchain_community-0.0.35.tar.gz", hash = "sha256:0f8726d9f8e1f369ae1b0c7ec738403063009a78ecb58860d21e5388e238ff0c"},
+    {file = "langchain_community-0.0.36-py3-none-any.whl", hash = "sha256:439ae85e01d852ba8388923d8e2a71121efdc2eea3dc1ce27d28741189f1ea75"},
+    {file = "langchain_community-0.0.36.tar.gz", hash = "sha256:97be9d00cf119c961e03ed226e04e670f51b5d42f5b05ffc3518598fa6d20c74"},
 ]
 
 [package.dependencies]
 aiohttp = ">=3.8.3,<4.0.0"
 dataclasses-json = ">=0.5.7,<0.7"
-langchain-core = ">=0.1.47,<0.2.0"
+langchain-core = ">=0.1.48,<0.2.0"
 langsmith = ">=0.1.0,<0.2.0"
 numpy = ">=1,<2"
 PyYAML = ">=5.3"
@@ -3785,13 +3785,13 @@ extended-testing = ["aiosqlite (>=0.19.0,<0.20.0)", "aleph-alpha-client (>=2.15.
 
 [[package]]
 name = "langchain-core"
-version = "0.1.47"
+version = "0.1.49"
 description = "Building applications with LLMs through composability"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_core-0.1.47-py3-none-any.whl", hash = "sha256:ebf12ca25cbdfedd8a61dbdb60f47283bb1bdfc39b5f01d3b76bb36fdbe4a1e8"},
-    {file = "langchain_core-0.1.47.tar.gz", hash = "sha256:d97d6927a4b22acbc2d0e731b3580890551256fa5dde775ef6beb72beb1a6015"},
+    {file = "langchain_core-0.1.49-py3-none-any.whl", hash = "sha256:4250bfa1861f4c1df3c911b40a974be4df291e1e9057a673fff65895320fdc7d"},
+    {file = "langchain_core-0.1.49.tar.gz", hash = "sha256:04f1e9f25656b98f35d5de9336ea2d1becb576184929a11036c71127caf0dca8"},
 ]
 
 [package.dependencies]
@@ -3843,13 +3843,13 @@ images = ["pillow (>=10.1.0,<11.0.0)"]
 
 [[package]]
 name = "langchain-openai"
-version = "0.1.4"
+version = "0.1.5"
 description = "An integration package connecting OpenAI and LangChain"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_openai-0.1.4-py3-none-any.whl", hash = "sha256:a349ada8724921e380aab03ee312568f5ca99adbc806f6878d79ff9cd1d6d353"},
-    {file = "langchain_openai-0.1.4.tar.gz", hash = "sha256:1a3220464c270d73ea3987010617789adc2099d4d4740b15c7734ab07e1f054b"},
+    {file = "langchain_openai-0.1.5-py3-none-any.whl", hash = "sha256:8789af68afe747fd05acbe5190e5f0f17cbcce4c07bc58f0584f169318ed9f1c"},
+    {file = "langchain_openai-0.1.5.tar.gz", hash = "sha256:c161890f871f8675eb633dcebb53173527045996468ed9d393ed892448408ab1"},
 ]
 
 [package.dependencies]
@@ -3960,17 +3960,17 @@ url = "src/backend/base"
 
 [[package]]
 name = "langfuse"
-version = "2.27.3"
+version = "2.28.2"
 description = "A client library for accessing langfuse"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langfuse-2.27.3-py3-none-any.whl", hash = "sha256:e5522abac56cb64b08fdcfc8a81317cb322b361cbd693f3fd7a19200e1fe5efc"},
-    {file = "langfuse-2.27.3.tar.gz", hash = "sha256:4d6b9434702c3d729a8b898f07e6065a8026ba568bdae603813b4f0678a17884"},
+    {file = "langfuse-2.28.2-py3-none-any.whl", hash = "sha256:0faf14051a5cf1ca36a35ef73a0b4f0030157733b3e93dc092957fa95a8d8e90"},
+    {file = "langfuse-2.28.2.tar.gz", hash = "sha256:217c1a43117b8952b9135bb927636f11d5a883ee09acc90b5d7e70d43bf8d30f"},
 ]
 
 [package.dependencies]
-backoff = ">=2.2.1,<3.0.0"
+backoff = ">=1.10.0"
 httpx = ">=0.15.4,<1.0"
 idna = ">=3.7,<4.0"
 packaging = ">=23.2,<24.0"
@@ -3984,13 +3984,13 @@ openai = ["openai (>=0.27.8)"]
 
 [[package]]
 name = "langsmith"
-version = "0.1.52"
+version = "0.1.53"
 description = "Client library to connect to the LangSmith LLM Tracing and Evaluation Platform."
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langsmith-0.1.52-py3-none-any.whl", hash = "sha256:4518e269b9a0e10197550f050b6518d1276fe68732f7b8579b3e1302b8471d29"},
-    {file = "langsmith-0.1.52.tar.gz", hash = "sha256:f767fddb13c794bea7cc827a77f050a8a1c075ab1d997eb37849b975b0eef1b0"},
+    {file = "langsmith-0.1.53-py3-none-any.whl", hash = "sha256:867f9c4176f92e019398dda22a210db68c98a810234a5266cf4609236dcd3043"},
+    {file = "langsmith-0.1.53.tar.gz", hash = "sha256:0ac271080fb67806f1b2c5de0e7c698c45a57b18b5d46e984e9b15dd38f0bc42"},
 ]
 
 [package.dependencies]
@@ -4017,13 +4017,13 @@ regex = ["regex"]
 
 [[package]]
 name = "litellm"
-version = "1.35.32"
+version = "1.35.35"
 description = "Library to easily interface with LLM API providers"
 optional = false
 python-versions = "!=2.7.*,!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,!=3.5.*,!=3.6.*,!=3.7.*,>=3.8"
 files = [
-    {file = "litellm-1.35.32-py3-none-any.whl", hash = "sha256:4c05b90124420e64d4a59a4b94d6b53eb679859cd064e7e59bd152a29cda1cb1"},
-    {file = "litellm-1.35.32.tar.gz", hash = "sha256:2ccc0f979c287404ec07c6b4b06254eba88f2ca1fca4cad12591ec89795db248"},
+    {file = "litellm-1.35.35-py3-none-any.whl", hash = "sha256:9dcf4a1fbdb1864de03f2fbcc26cc19ee83449966ad0b373b1d61f64ade963f7"},
+    {file = "litellm-1.35.35.tar.gz", hash = "sha256:f8873892f4a2f082e2f5f4fed5740f341b7d1a7778445785b2af68adbc2793e9"},
 ]
 
 [package.dependencies]
@@ -4043,12 +4043,12 @@ proxy = ["PyJWT (>=2.8.0,<3.0.0)", "apscheduler (>=3.10.4,<4.0.0)", "backoff", "
 
 [[package]]
 name = "llama-cpp-python"
-version = "0.2.68"
+version = "0.2.69"
 description = "Python bindings for the llama.cpp library"
 optional = true
 python-versions = ">=3.8"
 files = [
-    {file = "llama_cpp_python-0.2.68.tar.gz", hash = "sha256:737f2136c5f6fa1b0451f600c91ae2abe066edc7515937ca56efa4a648fdc71e"},
+    {file = "llama_cpp_python-0.2.69.tar.gz", hash = "sha256:b37e864b4d9f7ac286a3e926d87afab2f136ae9290e11088f7a205b80d3c04a9"},
 ]
 
 [package.dependencies]
@@ -4295,13 +4295,13 @@ llama-index-program-openai = ">=0.1.1,<0.2.0"
 
 [[package]]
 name = "llama-index-readers-file"
-version = "0.1.19"
+version = "0.1.20"
 description = "llama-index readers file integration"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "llama_index_readers_file-0.1.19-py3-none-any.whl", hash = "sha256:25eb6d066dc38753de435e876ef8511c68d84102302c053b7dcb0776db68fced"},
-    {file = "llama_index_readers_file-0.1.19.tar.gz", hash = "sha256:194c1b9b85c265159b7302c7d80adba937aab06f05c170af7fd95c4e7a8aec35"},
+    {file = "llama_index_readers_file-0.1.20-py3-none-any.whl", hash = "sha256:055999f86ad11130445bfe10c0886ddecb63e1b727678ab4ba58602282443289"},
+    {file = "llama_index_readers_file-0.1.20.tar.gz", hash = "sha256:1258c016bc8ee1efe37a3b081384ba47dbca13b92c205d3154ba235fc09cc2fb"},
 ]
 
 [package.dependencies]
@@ -4701,13 +4701,13 @@ files = [
 
 [[package]]
 name = "marshmallow"
-version = "3.21.1"
+version = "3.21.2"
 description = "A lightweight library for converting complex datatypes to and from native Python datatypes."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "marshmallow-3.21.1-py3-none-any.whl", hash = "sha256:f085493f79efb0644f270a9bf2892843142d80d7174bbbd2f3713f2a589dc633"},
-    {file = "marshmallow-3.21.1.tar.gz", hash = "sha256:4e65e9e0d80fc9e609574b9983cf32579f305c718afb30d7233ab818571768c3"},
+    {file = "marshmallow-3.21.2-py3-none-any.whl", hash = "sha256:70b54a6282f4704d12c0a41599682c5c5450e843b9ec406308653b47c59648a1"},
+    {file = "marshmallow-3.21.2.tar.gz", hash = "sha256:82408deadd8b33d56338d2182d455db632c6313aa2af61916672146bb32edc56"},
 ]
 
 [package.dependencies]
@@ -4715,7 +4715,7 @@ packaging = ">=17.0"
 
 [package.extras]
 dev = ["marshmallow[tests]", "pre-commit (>=3.5,<4.0)", "tox"]
-docs = ["alabaster (==0.7.16)", "autodocsumm (==0.2.12)", "sphinx (==7.2.6)", "sphinx-issues (==4.0.0)", "sphinx-version-warning (==1.1.2)"]
+docs = ["alabaster (==0.7.16)", "autodocsumm (==0.2.12)", "sphinx (==7.3.7)", "sphinx-issues (==4.1.0)", "sphinx-version-warning (==1.1.2)"]
 tests = ["pytest", "pytz", "simplejson"]
 
 [[package]]
@@ -4977,13 +4977,13 @@ files = [
 
 [[package]]
 name = "msoffcrypto-tool"
-version = "5.3.1"
-description = "Python tool and library for decrypting MS Office files with passwords or other keys"
+version = "5.4.0"
+description = "Python tool and library for decrypting and encrypting MS Office files using a password or other keys"
 optional = false
-python-versions = ">=3.8,<4.0"
+python-versions = "<4.0,>=3.8"
 files = [
-    {file = "msoffcrypto_tool-5.3.1-py3-none-any.whl", hash = "sha256:4e44c10e38ca06d0ea511a31ee8834bfdedaf304b1369a0d3919db4f495dd5e4"},
-    {file = "msoffcrypto_tool-5.3.1.tar.gz", hash = "sha256:f800ff133b9a753dfedff6a37b0f79bfeb8cc6856487b91dd486110c7d4f4099"},
+    {file = "msoffcrypto_tool-5.4.0-py3-none-any.whl", hash = "sha256:0e39319f982c22a449505e5ab7da18a8ae76376a0008e180e1528a0875525da7"},
+    {file = "msoffcrypto_tool-5.4.0.tar.gz", hash = "sha256:0f5f45d91d1eaa2ca0b3adefb5aac4932afb50c678dfa8d7da390d187f1dac39"},
 ]
 
 [package.dependencies]
@@ -5553,13 +5553,13 @@ sympy = "*"
 
 [[package]]
 name = "openai"
-version = "1.24.1"
+version = "1.25.1"
 description = "The official Python library for the openai API"
 optional = false
 python-versions = ">=3.7.1"
 files = [
-    {file = "openai-1.24.1-py3-none-any.whl", hash = "sha256:52fe59418bec5f6ec80dd8c523a5cce82ce6237b1712f1399eeaa8503f925ed7"},
-    {file = "openai-1.24.1.tar.gz", hash = "sha256:0b790ce01e6a51daac866d85f76a59ca7a17b2c4c35991542e24a0b40356fb63"},
+    {file = "openai-1.25.1-py3-none-any.whl", hash = "sha256:aa2f381f476f5fa4df8728a34a3e454c321caa064b7b68ab6e9daa1ed082dbf9"},
+    {file = "openai-1.25.1.tar.gz", hash = "sha256:f561ce86f4b4008eb6c78622d641e4b7e1ab8a8cdb15d2f0b2a49942d40d21a8"},
 ]
 
 [package.dependencies]
@@ -7211,18 +7211,18 @@ six = ">=1.5"
 
 [[package]]
 name = "python-docx"
-version = "1.1.0"
+version = "1.1.2"
 description = "Create, read, and update Microsoft Word .docx files."
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "python-docx-1.1.0.tar.gz", hash = "sha256:5829b722141cf1ab79aedf0c34d9fe9924b29764584c0f2164eb2b02dcdf17c9"},
-    {file = "python_docx-1.1.0-py3-none-any.whl", hash = "sha256:bac9773278098a1ddc43a52d84e22f5909c4a3080a624530b3ecb3771b07c6cd"},
+    {file = "python_docx-1.1.2-py3-none-any.whl", hash = "sha256:08c20d6058916fb19853fcf080f7f42b6270d89eac9fa5f8c15f691c0017fabe"},
+    {file = "python_docx-1.1.2.tar.gz", hash = "sha256:0cf1f22e95b9002addca7948e16f2cd7acdfd498047f1941ca5d293db7762efd"},
 ]
 
 [package.dependencies]
 lxml = ">=3.1.0"
-typing-extensions = "*"
+typing-extensions = ">=4.9.0"
 
 [[package]]
 name = "python-dotenv"
@@ -7444,99 +7444,99 @@ files = [
 
 [[package]]
 name = "pyzmq"
-version = "26.0.2"
+version = "26.0.3"
 description = "Python bindings for 0MQ"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "pyzmq-26.0.2-cp310-cp310-macosx_10_15_universal2.whl", hash = "sha256:1a60a03b01e8c9c58932ec0cca15b1712d911c2800eb82d4281bc1ae5b6dad50"},
-    {file = "pyzmq-26.0.2-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:949067079e14ea1973bd740255e0840118c163d4bce8837f539d749f145cf5c3"},
-    {file = "pyzmq-26.0.2-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:37e7edfa6cf96d036a403775c96afa25058d1bb940a79786a9a2fc94a783abe3"},
-    {file = "pyzmq-26.0.2-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:903cc7a84a7d4326b43755c368780800e035aa3d711deae84a533fdffa8755b0"},
-    {file = "pyzmq-26.0.2-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6cb2e41af165e5f327d06fbdd79a42a4e930267fade4e9f92d17f3ccce03f3a7"},
-    {file = "pyzmq-26.0.2-cp310-cp310-manylinux_2_28_x86_64.whl", hash = "sha256:55353b8189adcfc4c125fc4ce59d477744118e9c0ec379dd0999c5fa120ac4f5"},
-    {file = "pyzmq-26.0.2-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:f961423ff6236a752ced80057a20e623044df95924ed1009f844cde8b3a595f9"},
-    {file = "pyzmq-26.0.2-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:ba77fe84fe4f5f3dc0ef681a6d366685c8ffe1c8439c1d7530997b05ac06a04b"},
-    {file = "pyzmq-26.0.2-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:52589f0a745ef61b9c75c872cf91f8c1f7c0668eb3dd99d7abd639d8c0fb9ca7"},
-    {file = "pyzmq-26.0.2-cp310-cp310-win32.whl", hash = "sha256:b7b6d2a46c7afe2ad03ec8faf9967090c8ceae85c4d8934d17d7cae6f9062b64"},
-    {file = "pyzmq-26.0.2-cp310-cp310-win_amd64.whl", hash = "sha256:86531e20de249d9204cc6d8b13d5a30537748c78820215161d8a3b9ea58ca111"},
-    {file = "pyzmq-26.0.2-cp310-cp310-win_arm64.whl", hash = "sha256:f26a05029ecd2bd306b941ff8cb80f7620b7901421052bc429d238305b1cbf2f"},
-    {file = "pyzmq-26.0.2-cp311-cp311-macosx_10_15_universal2.whl", hash = "sha256:70770e296a9cb03d955540c99360aab861cbb3cba29516abbd106a15dbd91268"},
-    {file = "pyzmq-26.0.2-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:2740fd7161b39e178554ebf21aa5667a1c9ef0cd2cb74298fd4ef017dae7aec4"},
-    {file = "pyzmq-26.0.2-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f5e3706c32dea077faa42b1c92d825b7f86c866f72532d342e0be5e64d14d858"},
-    {file = "pyzmq-26.0.2-cp311-cp311-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:0fa1416876194927f7723d6b7171b95e1115602967fc6bfccbc0d2d51d8ebae1"},
-    {file = "pyzmq-26.0.2-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4ef9a79a48794099c57dc2df00340b5d47c5caa1792f9ddb8c7a26b1280bd575"},
-    {file = "pyzmq-26.0.2-cp311-cp311-manylinux_2_28_x86_64.whl", hash = "sha256:1c60fcdfa3229aeee4291c5d60faed3a813b18bdadb86299c4bf49e8e51e8605"},
-    {file = "pyzmq-26.0.2-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:e943c39c206b04df2eb5d71305761d7c3ca75fd49452115ea92db1b5b98dbdef"},
-    {file = "pyzmq-26.0.2-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:8da0ed8a598693731c76659880a668f4748b59158f26ed283a93f7f04d47447e"},
-    {file = "pyzmq-26.0.2-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:7bf51970b11d67096bede97cdbad0f4333f7664f4708b9b2acb352bf4faa3140"},
-    {file = "pyzmq-26.0.2-cp311-cp311-win32.whl", hash = "sha256:6f8e6bd5d066be605faa9fe5ec10aa1a46ad9f18fc8646f2b9aaefc8fb575742"},
-    {file = "pyzmq-26.0.2-cp311-cp311-win_amd64.whl", hash = "sha256:6d03da3a0ae691b361edcb39530075461202f699ce05adbb15055a0e1c9bcaa4"},
-    {file = "pyzmq-26.0.2-cp311-cp311-win_arm64.whl", hash = "sha256:f84e33321b68ff00b60e9dbd1a483e31ab6022c577c8de525b8e771bd274ce68"},
-    {file = "pyzmq-26.0.2-cp312-cp312-macosx_10_15_universal2.whl", hash = "sha256:44c33ebd1c62a01db7fbc24e18bdda569d6639217d13d5929e986a2b0f69070d"},
-    {file = "pyzmq-26.0.2-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:ac04f904b4fce4afea9cdccbb78e24d468cb610a839d5a698853e14e2a3f9ecf"},
-    {file = "pyzmq-26.0.2-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f2133de5ba9adc5f481884ccb699eac9ce789708292945c05746880f95b241c0"},
-    {file = "pyzmq-26.0.2-cp312-cp312-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:7753c67c570d7fc80c2dc59b90ca1196f1224e0e2e29a548980c95fe0fe27fc1"},
-    {file = "pyzmq-26.0.2-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8d4e51632e6b12e65e8d9d7612446ecda2eda637a868afa7bce16270194650dd"},
-    {file = "pyzmq-26.0.2-cp312-cp312-manylinux_2_28_x86_64.whl", hash = "sha256:d6c38806f6ecd0acf3104b8d7e76a206bcf56dadd6ce03720d2fa9d9157d5718"},
-    {file = "pyzmq-26.0.2-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:48f496bbe14686b51cec15406323ae6942851e14022efd7fc0e2ecd092c5982c"},
-    {file = "pyzmq-26.0.2-cp312-cp312-musllinux_1_1_i686.whl", hash = "sha256:e84a3161149c75bb7a7dc8646384186c34033e286a67fec1ad1bdedea165e7f4"},
-    {file = "pyzmq-26.0.2-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:dabf796c67aa9f5a4fcc956d47f0d48b5c1ed288d628cf53aa1cf08e88654343"},
-    {file = "pyzmq-26.0.2-cp312-cp312-win32.whl", hash = "sha256:3eee4c676af1b109f708d80ef0cf57ecb8aaa5900d1edaf90406aea7e0e20e37"},
-    {file = "pyzmq-26.0.2-cp312-cp312-win_amd64.whl", hash = "sha256:26721fec65846b3e4450dad050d67d31b017f97e67f7e0647b5f98aa47f828cf"},
-    {file = "pyzmq-26.0.2-cp312-cp312-win_arm64.whl", hash = "sha256:653955c6c233e90de128a1b8e882abc7216f41f44218056bd519969c8c413a15"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:becd8d8fb068fbb5a52096efd83a2d8e54354383f691781f53a4c26aee944542"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:7a15e5465e7083c12517209c9dd24722b25e9b63c49a563922922fc03554eb35"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:e8158ac8616941f874841f9fa0f6d2f1466178c2ff91ea08353fdc19de0d40c2"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ea2c6a53e28c7066ea7db86fcc0b71d78d01b818bb11d4a4341ec35059885295"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:bdbc7dab0b0e9c62c97b732899c4242e3282ba803bad668e03650b59b165466e"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:e74b6d5ef57bb65bf1b4a37453d8d86d88550dde3fb0f23b1f1a24e60c70af5b"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:ed4c6ee624ecbc77b18aeeb07bf0700d26571ab95b8f723f0d02e056b5bce438"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-win32.whl", hash = "sha256:8a98b3cb0484b83c19d8fb5524c8a469cd9f10e743f5904ac285d92678ee761f"},
-    {file = "pyzmq-26.0.2-cp37-cp37m-win_amd64.whl", hash = "sha256:aa5f95d71b6eca9cec28aa0a2f8310ea53dea313b63db74932879ff860c1fb8d"},
-    {file = "pyzmq-26.0.2-cp38-cp38-macosx_10_15_universal2.whl", hash = "sha256:5ff56c76ce77b9805378a7a73032c17cbdb1a5b84faa1df03c5d3e306e5616df"},
-    {file = "pyzmq-26.0.2-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:bab697fc1574fee4b81da955678708567c43c813c84c91074e452bda5346c921"},
-    {file = "pyzmq-26.0.2-cp38-cp38-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:0c0fed8aa9ba0488ee1cbdaa304deea92d52fab43d373297002cfcc69c0a20c5"},
-    {file = "pyzmq-26.0.2-cp38-cp38-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:606b922699fcec472ed814dda4dc3ff7c748254e0b26762a0ba21a726eb1c107"},
-    {file = "pyzmq-26.0.2-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:45f0fd82bad4d199fa993fbf0ac586a7ac5879addbe436a35a389df7e0eb4c91"},
-    {file = "pyzmq-26.0.2-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:166c5e41045939a52c01e6f374e493d9a6a45dfe677360d3e7026e38c42e8906"},
-    {file = "pyzmq-26.0.2-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:d566e859e8b8d5bca08467c093061774924b3d78a5ba290e82735b2569edc84b"},
-    {file = "pyzmq-26.0.2-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:264ee0e72b72ca59279dc320deab5ae0fac0d97881aed1875ce4bde2e56ffde0"},
-    {file = "pyzmq-26.0.2-cp38-cp38-win32.whl", hash = "sha256:3152bbd3a4744cbdd83dfb210ed701838b8b0c9065cef14671d6d91df12197d0"},
-    {file = "pyzmq-26.0.2-cp38-cp38-win_amd64.whl", hash = "sha256:bf77601d75ca692c179154b7e5943c286a4aaffec02c491afe05e60493ce95f2"},
-    {file = "pyzmq-26.0.2-cp39-cp39-macosx_10_15_universal2.whl", hash = "sha256:c770a7545b3deca2db185b59175e710a820dd4ed43619f4c02e90b0e227c6252"},
-    {file = "pyzmq-26.0.2-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:d47175f0a380bfd051726bc5c0054036ae4a5d8caf922c62c8a172ccd95c1a2a"},
-    {file = "pyzmq-26.0.2-cp39-cp39-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:9bce298c1ce077837e110367c321285dc4246b531cde1abfc27e4a5bbe2bed4d"},
-    {file = "pyzmq-26.0.2-cp39-cp39-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:c40b09b7e184d6e3e1be1c8af2cc320c0f9f610d8a5df3dd866e6e6e4e32b235"},
-    {file = "pyzmq-26.0.2-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:d420d856bf728713874cefb911398efe69e1577835851dd297a308a78c14c249"},
-    {file = "pyzmq-26.0.2-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:d792d3cab987058451e55c70c5926e93e2ceb68ca5a2334863bb903eb860c9cb"},
-    {file = "pyzmq-26.0.2-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:83ec17729cf6d3464dab98a11e98294fcd50e6b17eaabd3d841515c23f6dbd3a"},
-    {file = "pyzmq-26.0.2-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:47c17d5ebfa88ae90f08960c97b49917098665b8cd8be31f2c24e177bcf37a0f"},
-    {file = "pyzmq-26.0.2-cp39-cp39-win32.whl", hash = "sha256:d509685d1cd1d018705a811c5f9d5bc237790936ead6d06f6558b77e16cc7235"},
-    {file = "pyzmq-26.0.2-cp39-cp39-win_amd64.whl", hash = "sha256:c7cc8cc009e8f6989a6d86c96f87dae5f5fb07d6c96916cdc7719d546152c7db"},
-    {file = "pyzmq-26.0.2-cp39-cp39-win_arm64.whl", hash = "sha256:3ada31cb879cd7532f4a85b501f4255c747d4813ab76b35c49ed510ce4865b45"},
-    {file = "pyzmq-26.0.2-pp310-pypy310_pp73-macosx_10_9_x86_64.whl", hash = "sha256:0a6ceaddc830dd3ca86cb8451cf373d1f05215368e11834538c2902ed5205139"},
-    {file = "pyzmq-26.0.2-pp310-pypy310_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:6a967681463aa7a99eb9a62bb18229b653b45c10ff0947b31cc0837a83dfb86f"},
-    {file = "pyzmq-26.0.2-pp310-pypy310_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:6472a73bc115bc40a2076609a90894775abe6faf19a78375675a2f889a613071"},
-    {file = "pyzmq-26.0.2-pp310-pypy310_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5d6aea92bcccfe5e5524d3c70a6f16ffdae548390ddad26f4207d55c55a40593"},
-    {file = "pyzmq-26.0.2-pp310-pypy310_pp73-win_amd64.whl", hash = "sha256:e025f6351e49d48a5aa2f5a09293aa769b0ee7369c25bed551647234b7fa0c75"},
-    {file = "pyzmq-26.0.2-pp37-pypy37_pp73-macosx_10_9_x86_64.whl", hash = "sha256:40bd7ebe4dbb37d27f0c56e2a844f360239343a99be422085e13e97da13f73f9"},
-    {file = "pyzmq-26.0.2-pp37-pypy37_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:1dd40d586ad6f53764104df6e01810fe1b4e88fd353774629a5e6fe253813f79"},
-    {file = "pyzmq-26.0.2-pp37-pypy37_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:f2aca15e9ad8c8657b5b3d7ae3d1724dc8c1c1059c06b4b674c3aa36305f4930"},
-    {file = "pyzmq-26.0.2-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:450ec234736732eb0ebeffdb95a352450d4592f12c3e087e2a9183386d22c8bf"},
-    {file = "pyzmq-26.0.2-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:f43be2bebbd09360a2f23af83b243dc25ffe7b583ea8c722e6df03e03a55f02f"},
-    {file = "pyzmq-26.0.2-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:867f55e54aff254940bcec5eec068e7c0ac1e6bf360ab91479394a8bf356b0e6"},
-    {file = "pyzmq-26.0.2-pp38-pypy38_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:b4dbc033c5ad46f8c429bf238c25a889b8c1d86bfe23a74e1031a991cb3f0000"},
-    {file = "pyzmq-26.0.2-pp38-pypy38_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:6e8dd2961462e337e21092ec2da0c69d814dcb1b6e892955a37444a425e9cfb8"},
-    {file = "pyzmq-26.0.2-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:35391e72df6c14a09b697c7b94384947c1dd326aca883ff98ff137acdf586c33"},
-    {file = "pyzmq-26.0.2-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:1c3d3c92fa54eda94ab369ca5b8d35059987c326ba5e55326eb068862f64b1fc"},
-    {file = "pyzmq-26.0.2-pp39-pypy39_pp73-macosx_10_9_x86_64.whl", hash = "sha256:e7aa61a9cc4f0523373e31fc9255bf4567185a099f85ca3598e64de484da3ab2"},
-    {file = "pyzmq-26.0.2-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ee53a8191271f144cc20b12c19daa9f1546adc84a2f33839e3338039b55c373c"},
-    {file = "pyzmq-26.0.2-pp39-pypy39_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:ac60a980f07fa988983f7bfe6404ef3f1e4303f5288a01713bc1266df6d18783"},
-    {file = "pyzmq-26.0.2-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:88896b1b4817d7b2fe1ec7205c4bbe07bf5d92fb249bf2d226ddea8761996068"},
-    {file = "pyzmq-26.0.2-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:18dfffe23751edee917764ffa133d5d3fef28dfd1cf3adebef8c90bc854c74c4"},
-    {file = "pyzmq-26.0.2-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:6926dd14cfe6967d3322640b6d5c3c3039db71716a5e43cca6e3b474e73e0b36"},
-    {file = "pyzmq-26.0.2.tar.gz", hash = "sha256:f0f9bb370449158359bb72a3e12c658327670c0ffe6fbcd1af083152b64f9df0"},
+    {file = "pyzmq-26.0.3-cp310-cp310-macosx_10_15_universal2.whl", hash = "sha256:44dd6fc3034f1eaa72ece33588867df9e006a7303725a12d64c3dff92330f625"},
+    {file = "pyzmq-26.0.3-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:acb704195a71ac5ea5ecf2811c9ee19ecdc62b91878528302dd0be1b9451cc90"},
+    {file = "pyzmq-26.0.3-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5dbb9c997932473a27afa93954bb77a9f9b786b4ccf718d903f35da3232317de"},
+    {file = "pyzmq-26.0.3-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:6bcb34f869d431799c3ee7d516554797f7760cb2198ecaa89c3f176f72d062be"},
+    {file = "pyzmq-26.0.3-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:38ece17ec5f20d7d9b442e5174ae9f020365d01ba7c112205a4d59cf19dc38ee"},
+    {file = "pyzmq-26.0.3-cp310-cp310-manylinux_2_28_x86_64.whl", hash = "sha256:ba6e5e6588e49139a0979d03a7deb9c734bde647b9a8808f26acf9c547cab1bf"},
+    {file = "pyzmq-26.0.3-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:3bf8b000a4e2967e6dfdd8656cd0757d18c7e5ce3d16339e550bd462f4857e59"},
+    {file = "pyzmq-26.0.3-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:2136f64fbb86451dbbf70223635a468272dd20075f988a102bf8a3f194a411dc"},
+    {file = "pyzmq-26.0.3-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:e8918973fbd34e7814f59143c5f600ecd38b8038161239fd1a3d33d5817a38b8"},
+    {file = "pyzmq-26.0.3-cp310-cp310-win32.whl", hash = "sha256:0aaf982e68a7ac284377d051c742610220fd06d330dcd4c4dbb4cdd77c22a537"},
+    {file = "pyzmq-26.0.3-cp310-cp310-win_amd64.whl", hash = "sha256:f1a9b7d00fdf60b4039f4455afd031fe85ee8305b019334b72dcf73c567edc47"},
+    {file = "pyzmq-26.0.3-cp310-cp310-win_arm64.whl", hash = "sha256:80b12f25d805a919d53efc0a5ad7c0c0326f13b4eae981a5d7b7cc343318ebb7"},
+    {file = "pyzmq-26.0.3-cp311-cp311-macosx_10_15_universal2.whl", hash = "sha256:a72a84570f84c374b4c287183debc776dc319d3e8ce6b6a0041ce2e400de3f32"},
+    {file = "pyzmq-26.0.3-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:7ca684ee649b55fd8f378127ac8462fb6c85f251c2fb027eb3c887e8ee347bcd"},
+    {file = "pyzmq-26.0.3-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e222562dc0f38571c8b1ffdae9d7adb866363134299264a1958d077800b193b7"},
+    {file = "pyzmq-26.0.3-cp311-cp311-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:f17cde1db0754c35a91ac00b22b25c11da6eec5746431d6e5092f0cd31a3fea9"},
+    {file = "pyzmq-26.0.3-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:4b7c0c0b3244bb2275abe255d4a30c050d541c6cb18b870975553f1fb6f37527"},
+    {file = "pyzmq-26.0.3-cp311-cp311-manylinux_2_28_x86_64.whl", hash = "sha256:ac97a21de3712afe6a6c071abfad40a6224fd14fa6ff0ff8d0c6e6cd4e2f807a"},
+    {file = "pyzmq-26.0.3-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:88b88282e55fa39dd556d7fc04160bcf39dea015f78e0cecec8ff4f06c1fc2b5"},
+    {file = "pyzmq-26.0.3-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:72b67f966b57dbd18dcc7efbc1c7fc9f5f983e572db1877081f075004614fcdd"},
+    {file = "pyzmq-26.0.3-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:f4b6cecbbf3b7380f3b61de3a7b93cb721125dc125c854c14ddc91225ba52f83"},
+    {file = "pyzmq-26.0.3-cp311-cp311-win32.whl", hash = "sha256:eed56b6a39216d31ff8cd2f1d048b5bf1700e4b32a01b14379c3b6dde9ce3aa3"},
+    {file = "pyzmq-26.0.3-cp311-cp311-win_amd64.whl", hash = "sha256:3191d312c73e3cfd0f0afdf51df8405aafeb0bad71e7ed8f68b24b63c4f36500"},
+    {file = "pyzmq-26.0.3-cp311-cp311-win_arm64.whl", hash = "sha256:b6907da3017ef55139cf0e417c5123a84c7332520e73a6902ff1f79046cd3b94"},
+    {file = "pyzmq-26.0.3-cp312-cp312-macosx_10_15_universal2.whl", hash = "sha256:068ca17214038ae986d68f4a7021f97e187ed278ab6dccb79f837d765a54d753"},
+    {file = "pyzmq-26.0.3-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:7821d44fe07335bea256b9f1f41474a642ca55fa671dfd9f00af8d68a920c2d4"},
+    {file = "pyzmq-26.0.3-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:eeb438a26d87c123bb318e5f2b3d86a36060b01f22fbdffd8cf247d52f7c9a2b"},
+    {file = "pyzmq-26.0.3-cp312-cp312-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:69ea9d6d9baa25a4dc9cef5e2b77b8537827b122214f210dd925132e34ae9b12"},
+    {file = "pyzmq-26.0.3-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7daa3e1369355766dea11f1d8ef829905c3b9da886ea3152788dc25ee6079e02"},
+    {file = "pyzmq-26.0.3-cp312-cp312-manylinux_2_28_x86_64.whl", hash = "sha256:6ca7a9a06b52d0e38ccf6bca1aeff7be178917893f3883f37b75589d42c4ac20"},
+    {file = "pyzmq-26.0.3-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:1b7d0e124948daa4d9686d421ef5087c0516bc6179fdcf8828b8444f8e461a77"},
+    {file = "pyzmq-26.0.3-cp312-cp312-musllinux_1_1_i686.whl", hash = "sha256:e746524418b70f38550f2190eeee834db8850088c834d4c8406fbb9bc1ae10b2"},
+    {file = "pyzmq-26.0.3-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:6b3146f9ae6af82c47a5282ac8803523d381b3b21caeae0327ed2f7ecb718798"},
+    {file = "pyzmq-26.0.3-cp312-cp312-win32.whl", hash = "sha256:2b291d1230845871c00c8462c50565a9cd6026fe1228e77ca934470bb7d70ea0"},
+    {file = "pyzmq-26.0.3-cp312-cp312-win_amd64.whl", hash = "sha256:926838a535c2c1ea21c903f909a9a54e675c2126728c21381a94ddf37c3cbddf"},
+    {file = "pyzmq-26.0.3-cp312-cp312-win_arm64.whl", hash = "sha256:5bf6c237f8c681dfb91b17f8435b2735951f0d1fad10cc5dfd96db110243370b"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:0c0991f5a96a8e620f7691e61178cd8f457b49e17b7d9cfa2067e2a0a89fc1d5"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:dbf012d8fcb9f2cf0643b65df3b355fdd74fc0035d70bb5c845e9e30a3a4654b"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:01fbfbeb8249a68d257f601deb50c70c929dc2dfe683b754659569e502fbd3aa"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1c8eb19abe87029c18f226d42b8a2c9efdd139d08f8bf6e085dd9075446db450"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:5344b896e79800af86ad643408ca9aa303a017f6ebff8cee5a3163c1e9aec987"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:204e0f176fd1d067671157d049466869b3ae1fc51e354708b0dc41cf94e23a3a"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:a42db008d58530efa3b881eeee4991146de0b790e095f7ae43ba5cc612decbc5"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-win32.whl", hash = "sha256:8d7a498671ca87e32b54cb47c82a92b40130a26c5197d392720a1bce1b3c77cf"},
+    {file = "pyzmq-26.0.3-cp37-cp37m-win_amd64.whl", hash = "sha256:3b4032a96410bdc760061b14ed6a33613ffb7f702181ba999df5d16fb96ba16a"},
+    {file = "pyzmq-26.0.3-cp38-cp38-macosx_10_15_universal2.whl", hash = "sha256:2cc4e280098c1b192c42a849de8de2c8e0f3a84086a76ec5b07bfee29bda7d18"},
+    {file = "pyzmq-26.0.3-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:5bde86a2ed3ce587fa2b207424ce15b9a83a9fa14422dcc1c5356a13aed3df9d"},
+    {file = "pyzmq-26.0.3-cp38-cp38-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:34106f68e20e6ff253c9f596ea50397dbd8699828d55e8fa18bd4323d8d966e6"},
+    {file = "pyzmq-26.0.3-cp38-cp38-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:ebbbd0e728af5db9b04e56389e2299a57ea8b9dd15c9759153ee2455b32be6ad"},
+    {file = "pyzmq-26.0.3-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f6b1d1c631e5940cac5a0b22c5379c86e8df6a4ec277c7a856b714021ab6cfad"},
+    {file = "pyzmq-26.0.3-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:e891ce81edd463b3b4c3b885c5603c00141151dd9c6936d98a680c8c72fe5c67"},
+    {file = "pyzmq-26.0.3-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:9b273ecfbc590a1b98f014ae41e5cf723932f3b53ba9367cfb676f838038b32c"},
+    {file = "pyzmq-26.0.3-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:b32bff85fb02a75ea0b68f21e2412255b5731f3f389ed9aecc13a6752f58ac97"},
+    {file = "pyzmq-26.0.3-cp38-cp38-win32.whl", hash = "sha256:f6c21c00478a7bea93caaaef9e7629145d4153b15a8653e8bb4609d4bc70dbfc"},
+    {file = "pyzmq-26.0.3-cp38-cp38-win_amd64.whl", hash = "sha256:3401613148d93ef0fd9aabdbddb212de3db7a4475367f49f590c837355343972"},
+    {file = "pyzmq-26.0.3-cp39-cp39-macosx_10_15_universal2.whl", hash = "sha256:2ed8357f4c6e0daa4f3baf31832df8a33334e0fe5b020a61bc8b345a3db7a606"},
+    {file = "pyzmq-26.0.3-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:c1c8f2a2ca45292084c75bb6d3a25545cff0ed931ed228d3a1810ae3758f975f"},
+    {file = "pyzmq-26.0.3-cp39-cp39-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:b63731993cdddcc8e087c64e9cf003f909262b359110070183d7f3025d1c56b5"},
+    {file = "pyzmq-26.0.3-cp39-cp39-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:b3cd31f859b662ac5d7f4226ec7d8bd60384fa037fc02aee6ff0b53ba29a3ba8"},
+    {file = "pyzmq-26.0.3-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:115f8359402fa527cf47708d6f8a0f8234f0e9ca0cab7c18c9c189c194dbf620"},
+    {file = "pyzmq-26.0.3-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:715bdf952b9533ba13dfcf1f431a8f49e63cecc31d91d007bc1deb914f47d0e4"},
+    {file = "pyzmq-26.0.3-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:e1258c639e00bf5e8a522fec6c3eaa3e30cf1c23a2f21a586be7e04d50c9acab"},
+    {file = "pyzmq-26.0.3-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:15c59e780be8f30a60816a9adab900c12a58d79c1ac742b4a8df044ab2a6d920"},
+    {file = "pyzmq-26.0.3-cp39-cp39-win32.whl", hash = "sha256:d0cdde3c78d8ab5b46595054e5def32a755fc028685add5ddc7403e9f6de9879"},
+    {file = "pyzmq-26.0.3-cp39-cp39-win_amd64.whl", hash = "sha256:ce828058d482ef860746bf532822842e0ff484e27f540ef5c813d516dd8896d2"},
+    {file = "pyzmq-26.0.3-cp39-cp39-win_arm64.whl", hash = "sha256:788f15721c64109cf720791714dc14afd0f449d63f3a5487724f024345067381"},
+    {file = "pyzmq-26.0.3-pp310-pypy310_pp73-macosx_10_9_x86_64.whl", hash = "sha256:2c18645ef6294d99b256806e34653e86236eb266278c8ec8112622b61db255de"},
+    {file = "pyzmq-26.0.3-pp310-pypy310_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:7e6bc96ebe49604df3ec2c6389cc3876cabe475e6bfc84ced1bf4e630662cb35"},
+    {file = "pyzmq-26.0.3-pp310-pypy310_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:971e8990c5cc4ddcff26e149398fc7b0f6a042306e82500f5e8db3b10ce69f84"},
+    {file = "pyzmq-26.0.3-pp310-pypy310_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d8416c23161abd94cc7da80c734ad7c9f5dbebdadfdaa77dad78244457448223"},
+    {file = "pyzmq-26.0.3-pp310-pypy310_pp73-win_amd64.whl", hash = "sha256:082a2988364b60bb5de809373098361cf1dbb239623e39e46cb18bc035ed9c0c"},
+    {file = "pyzmq-26.0.3-pp37-pypy37_pp73-macosx_10_9_x86_64.whl", hash = "sha256:d57dfbf9737763b3a60d26e6800e02e04284926329aee8fb01049635e957fe81"},
+    {file = "pyzmq-26.0.3-pp37-pypy37_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:77a85dca4c2430ac04dc2a2185c2deb3858a34fe7f403d0a946fa56970cf60a1"},
+    {file = "pyzmq-26.0.3-pp37-pypy37_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:4c82a6d952a1d555bf4be42b6532927d2a5686dd3c3e280e5f63225ab47ac1f5"},
+    {file = "pyzmq-26.0.3-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4496b1282c70c442809fc1b151977c3d967bfb33e4e17cedbf226d97de18f709"},
+    {file = "pyzmq-26.0.3-pp37-pypy37_pp73-win_amd64.whl", hash = "sha256:e4946d6bdb7ba972dfda282f9127e5756d4f299028b1566d1245fa0d438847e6"},
+    {file = "pyzmq-26.0.3-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:03c0ae165e700364b266876d712acb1ac02693acd920afa67da2ebb91a0b3c09"},
+    {file = "pyzmq-26.0.3-pp38-pypy38_pp73-manylinux_2_12_i686.manylinux2010_i686.whl", hash = "sha256:3e3070e680f79887d60feeda051a58d0ac36622e1759f305a41059eff62c6da7"},
+    {file = "pyzmq-26.0.3-pp38-pypy38_pp73-manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:6ca08b840fe95d1c2bd9ab92dac5685f949fc6f9ae820ec16193e5ddf603c3b2"},
+    {file = "pyzmq-26.0.3-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e76654e9dbfb835b3518f9938e565c7806976c07b37c33526b574cc1a1050480"},
+    {file = "pyzmq-26.0.3-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:871587bdadd1075b112e697173e946a07d722459d20716ceb3d1bd6c64bd08ce"},
+    {file = "pyzmq-26.0.3-pp39-pypy39_pp73-macosx_10_9_x86_64.whl", hash = "sha256:d0a2d1bd63a4ad79483049b26514e70fa618ce6115220da9efdff63688808b17"},
+    {file = "pyzmq-26.0.3-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:0270b49b6847f0d106d64b5086e9ad5dc8a902413b5dbbb15d12b60f9c1747a4"},
+    {file = "pyzmq-26.0.3-pp39-pypy39_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:703c60b9910488d3d0954ca585c34f541e506a091a41930e663a098d3b794c67"},
+    {file = "pyzmq-26.0.3-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:74423631b6be371edfbf7eabb02ab995c2563fee60a80a30829176842e71722a"},
+    {file = "pyzmq-26.0.3-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:4adfbb5451196842a88fda3612e2c0414134874bffb1c2ce83ab4242ec9e027d"},
+    {file = "pyzmq-26.0.3-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:3516119f4f9b8671083a70b6afaa0a070f5683e431ab3dc26e9215620d7ca1ad"},
+    {file = "pyzmq-26.0.3.tar.gz", hash = "sha256:dba7d9f2e047dfa2bca3b01f4f84aa5246725203d6284e3790f2ca15fba6b40a"},
 ]
 
 [package.dependencies]
@@ -8499,13 +8499,13 @@ typing = ["mypy (>=1.4)", "rich", "twisted"]
 
 [[package]]
 name = "supabase"
-version = "2.4.3"
+version = "2.4.5"
 description = "Supabase client for Python."
 optional = false
 python-versions = "<4.0,>=3.8"
 files = [
-    {file = "supabase-2.4.3-py3-none-any.whl", hash = "sha256:31b7cf5577471f473e690e6afb1b2f8ffe881a5a81f2c33a5fa7b07ba0fb9857"},
-    {file = "supabase-2.4.3.tar.gz", hash = "sha256:ee9a5db8ecc3de20fe8351b0d3bc7667809095322915cea753f83db310494001"},
+    {file = "supabase-2.4.5-py3-none-any.whl", hash = "sha256:100441c36bf3390b040818c636c372a91645d18b6a9e0c12cea061fb00db664c"},
+    {file = "supabase-2.4.5.tar.gz", hash = "sha256:8520b5a194c6d8fdbdd71b45aefc8b5a42d1a6711a2c693b6d299aeb785e8532"},
 ]
 
 [package.dependencies]
@@ -9541,13 +9541,13 @@ test = ["Cython (>=0.29.36,<0.30.0)", "aiohttp (==3.9.0b0)", "aiohttp (>=3.8.1)"
 
 [[package]]
 name = "validators"
-version = "0.28.0"
+version = "0.28.1"
 description = "Python Data Validation for Humans™"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "validators-0.28.0-py3-none-any.whl", hash = "sha256:e0184691dea3ba82b52c161ba81d3ec1d8be8da9609f0137d1430b395b366521"},
-    {file = "validators-0.28.0.tar.gz", hash = "sha256:85bc82511f6ccd0800f4c15d8c0dc546c15e369640c5ea1f24349ba0b3b17815"},
+    {file = "validators-0.28.1-py3-none-any.whl", hash = "sha256:890c98789ad884037f059af6ea915ec2d667129d509180c2c590b8009a4c4219"},
+    {file = "validators-0.28.1.tar.gz", hash = "sha256:5ac88e7916c3405f0ce38ac2ac82a477fcf4d90dbbeddd04c8193171fc17f7dc"},
 ]
 
 [[package]]
@@ -9661,13 +9661,13 @@ files = [
 
 [[package]]
 name = "weaviate-client"
-version = "4.5.6"
+version = "4.5.7"
 description = "A python native Weaviate client"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "weaviate_client-4.5.6-py3-none-any.whl", hash = "sha256:bdafbf94343f621ca68bc547b5c9a5272dc6ca7953ad6a228f5ad8179021de68"},
-    {file = "weaviate_client-4.5.6.tar.gz", hash = "sha256:32a2b328f0a6637228c064e04aa6004c4ba733469b81754ae4598750735a9624"},
+    {file = "weaviate_client-4.5.7-py3-none-any.whl", hash = "sha256:97958050d215ab64d702e5dd29206c4b855a3372d3ae22f784287a2d0ed085dc"},
+    {file = "weaviate_client-4.5.7.tar.gz", hash = "sha256:130f7371c4af31949e6f3537683813f0e5adb7ec94a5536e2278768c5fe057bf"},
 ]
 
 [package.dependencies]
@@ -9675,10 +9675,10 @@ authlib = ">=1.2.1,<2.0.0"
 grpcio = ">=1.57.0,<2.0.0"
 grpcio-health-checking = ">=1.57.0,<2.0.0"
 grpcio-tools = ">=1.57.0,<2.0.0"
-httpx = "0.27.0"
+httpx = ">=0.25.0,<=0.27.0"
 pydantic = ">=2.5.0,<3.0.0"
 requests = ">=2.30.0,<3.0.0"
-validators = "0.28.0"
+validators = "0.28.1"
 
 [[package]]
 name = "websocket-client"

From 820c0c37124ff012a85c42cb2fc88299892222f1 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 2 May 2024 15:54:16 -0300
Subject: [PATCH 117/142] =?UTF-8?q?=F0=9F=90=9B=20(chat.py):=20fix=20type?=
 =?UTF-8?q?=20annotation=20for=20'data'=20parameter=20in=20retrieve=5Fvert?=
 =?UTF-8?q?ices=5Forder=20function=20to=20allow=20None=20as=20a=20value=20?=
 =?UTF-8?q?=F0=9F=90=9B=20(constants.py):=20fix=20import=20statement=20for?=
 =?UTF-8?q?=20JsonSpec=20from=20langchain.tools.json.tool=20to=20langchain?=
 =?UTF-8?q?=5Fcommunity.tools.json.tool=20=F0=9F=90=9B=20(index.tsx):=20ad?=
 =?UTF-8?q?d=20data-testid=20attribute=20to=20the=20div=20element=20to=20i?=
 =?UTF-8?q?mprove=20testability=20=F0=9F=90=9B=20(buildUtils.ts):=20add=20?=
 =?UTF-8?q?debugger=20statement=20for=20debugging=20purposes=20?=
 =?UTF-8?q?=F0=9F=90=9B=20(chatInputOutput.spec.ts):=20fix=20click=20event?=
 =?UTF-8?q?=20target=20from=20"Run"=20to=20"Playground"=20=F0=9F=90=9B=20(?=
 =?UTF-8?q?fileUploadComponent.spec.ts):=20fix=20click=20event=20target=20?=
 =?UTF-8?q?from=20"Run"=20to=20"Playground"=20=F0=9F=90=9B=20(textInputOut?=
 =?UTF-8?q?put.spec.ts):=20fix=20click=20event=20target=20from=20"Run"=20t?=
 =?UTF-8?q?o=20"Playground"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/base/langflow/api/v1/chat.py          |  2 +-
 .../base/langflow/interface/tools/constants.py    |  2 +-
 .../src/CustomNodes/GenericNode/index.tsx         |  6 +++++-
 src/frontend/src/utils/buildUtils.ts              | 15 +++++++++++----
 .../tests/end-to-end/chatInputOutput.spec.ts      |  6 +++---
 .../tests/end-to-end/fileUploadComponent.spec.ts  |  2 +-
 .../tests/end-to-end/textInputOutput.spec.ts      |  4 ++--
 7 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/backend/base/langflow/api/v1/chat.py b/src/backend/base/langflow/api/v1/chat.py
index 2ec62501a..d44d96e72 100644
--- a/src/backend/base/langflow/api/v1/chat.py
+++ b/src/backend/base/langflow/api/v1/chat.py
@@ -54,7 +54,7 @@ async def try_running_celery_task(vertex, user_id):
 @router.post("/build/{flow_id}/vertices", response_model=VerticesOrderResponse)
 async def retrieve_vertices_order(
     flow_id: str,
-    data: Annotated[Optional[FlowDataRequest], Body(embed=True)] = None,
+    data: Optional[Annotated[Optional[FlowDataRequest], Body(embed=True)]] = None,
     stop_component_id: Optional[str] = None,
     start_component_id: Optional[str] = None,
     chat_service: "ChatService" = Depends(get_chat_service),
diff --git a/src/backend/base/langflow/interface/tools/constants.py b/src/backend/base/langflow/interface/tools/constants.py
index 7b07922e5..27b42b327 100644
--- a/src/backend/base/langflow/interface/tools/constants.py
+++ b/src/backend/base/langflow/interface/tools/constants.py
@@ -1,7 +1,7 @@
 from langchain import tools
 from langchain.agents import Tool
 from langchain.agents.load_tools import _BASE_TOOLS, _EXTRA_LLM_TOOLS, _EXTRA_OPTIONAL_TOOLS, _LLM_TOOLS
-from langchain.tools.json.tool import JsonSpec
+from langchain_community.tools.json.tool import JsonSpec
 
 from langflow.interface.importing.utils import import_class
 from langflow.interface.tools.custom import PythonFunctionTool
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 29673fdb8..64d3b4bea 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -645,7 +645,11 @@ export default function GenericNode({
                   variant="secondary"
                   className={"group h-9 px-1.5"}
                 >
-                  <div>
+                  <div
+                    data-testid={
+                      `button_run_` + data?.node?.display_name.toLowerCase()
+                    }
+                  >
                     <div className="generic-node-status-position flex items-center justify-center">
                       {renderIconStatus(buildStatus, validationStatus)}
                     </div>
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index 5d3de6ea9..2f5d557c5 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/src/frontend/src/utils/buildUtils.ts
@@ -1,11 +1,11 @@
 import { AxiosError } from "axios";
+import { Edge, Node } from "reactflow";
 import { BuildStatus } from "../constants/enums";
 import { getVerticesOrder, postBuildVertex } from "../controllers/API";
 import useAlertStore from "../stores/alertStore";
 import useFlowStore from "../stores/flowStore";
 import { VertexBuildTypeAPI } from "../types/api";
 import { VertexLayerElementType } from "../types/zustand/flow";
-import { Edge, Node } from "reactflow";
 
 type BuildVerticesParams = {
   flowId: string; // Assuming FlowType is the type for your flow
@@ -52,8 +52,8 @@ export async function updateVerticesOrder(
   flowId: string,
   startNodeId?: string | null,
   stopNodeId?: string | null,
-  nodes?:Node[],
-  edges?:Edge[]
+  nodes?: Node[],
+  edges?: Edge[]
 ): Promise<{
   verticesLayers: VertexLayerElementType[][];
   verticesIds: string[];
@@ -64,12 +64,19 @@ export async function updateVerticesOrder(
     const setErrorData = useAlertStore.getState().setErrorData;
     let orderResponse;
     try {
-      orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId, nodes, edges);
+      orderResponse = await getVerticesOrder(
+        flowId,
+        startNodeId,
+        stopNodeId,
+        nodes,
+        edges
+      );
     } catch (error: any) {
       setErrorData({
         title: "Oops! Looks like you missed something",
         list: [error.response?.data?.detail ?? "Unknown Error"],
       });
+      debugger;
       useFlowStore.getState().setIsBuilding(false);
       throw new Error("Invalid nodes");
     }
diff --git a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
index bc507efb7..50548ab21 100644
--- a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
@@ -45,7 +45,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   await page
     .getByTestId("input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
   await page.getByTestId("icon-LucideSend").click();
   let valueUser = await page.getByTestId("sender_name_user").textContent();
@@ -65,7 +65,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   await page.getByTestId("input-sender_name").nth(1).fill("TestSenderNameUser");
   await page.getByTestId("input-sender_name").nth(0).fill("TestSenderNameAI");
 
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByTestId("icon-LucideSend").click();
 
   valueUser = await page
@@ -138,7 +138,7 @@ test("chat_io_teste", async ({ page }) => {
     }
   );
   await page.getByLabel("fit view").click();
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByPlaceholder("Send a message...").click();
   await page.getByPlaceholder("Send a message...").fill("teste");
   await page.getByRole("button").nth(1).click();
diff --git a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
index 7141c6a7f..e38ff1bc0 100644
--- a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
@@ -79,7 +79,7 @@ test("dropDownComponent", async ({ page }) => {
   // Release the mouse
   await page.mouse.up();
 
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByText("Run Flow", { exact: true }).click();
   await page.waitForTimeout(3000);
   const textOutput = await page.getByPlaceholder("Empty").first().inputValue();
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
index 5312cb96b..9ac25bd8f 100644
--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -117,7 +117,7 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page
     .getByTestId("input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByText("Run Flow", { exact: true }).click();
 
   await page.waitForTimeout(5000);
@@ -138,7 +138,7 @@ test("TextInputOutputComponent", async ({ page }) => {
     .getByTestId("input-input_value")
     .nth(0)
     .fill("This is a test, again just to be sure!");
-  await page.getByText("Run", { exact: true }).click();
+  await page.getByText("Playground", { exact: true }).click();
   await page.getByText("Run Flow", { exact: true }).click();
 
   await page.waitForTimeout(5000);

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 118/142] 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 119/142] 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 120/142] 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 121/142] 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 122/142] 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 123/142] 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 124/142] 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 125/142] 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 126/142] =?UTF-8?q?=F0=9F=93=9D=20(addNewVariableButton.ts?=
 =?UTF-8?q?x):=20reformat=20code=20for=20better=20readability=20and=20main?=
 =?UTF-8?q?tainability=20=F0=9F=93=9D=20(addNewVariableButton.tsx):=20fix?=
 =?UTF-8?q?=20typo=20in=20variable=20name=20'unavaliableFields'=20to=20'un?=
 =?UTF-8?q?availableFields'=20=F0=9F=93=9D=20(addNewVariableButton.tsx):?=
 =?UTF-8?q?=20add=20id=20attribute=20to=20InputComponent=20for=20better=20?=
 =?UTF-8?q?accessibility=20=F0=9F=93=9D=20(headerComponent/index.tsx):=20a?=
 =?UTF-8?q?dd=20data-testid=20attribute=20to=20user-profile-settings=20but?=
 =?UTF-8?q?ton=20for=20easier=20testing=20=F0=9F=93=9D=20(inputComponent/i?=
 =?UTF-8?q?ndex.tsx):=20add=20data-testid=20attribute=20to=20popover=20anc?=
 =?UTF-8?q?hor=20element=20for=20easier=20testing=20=E2=9C=A8=20(userSetti?=
 =?UTF-8?q?ngs.spec.ts):=20add=20end-to-end=20tests=20for=20user=20setting?=
 =?UTF-8?q?s=20page,=20including=20testing=20profile=20gradient,=20interac?=
 =?UTF-8?q?ting=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 127/142] =?UTF-8?q?=F0=9F=94=A7=20(FileInput.py,=20JsonInp?=
 =?UTF-8?q?ut.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 128/142] 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 129/142] 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 130/142] 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 131/142] 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 132/142] 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 133/142] 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 134/142] =?UTF-8?q?=F0=9F=94=A7=20(.pre-commit-config.yaml?=
 =?UTF-8?q?):=20add=20eslint-plugin-react@latest=20as=20a=20dependency=20t?=
 =?UTF-8?q?o=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 135/142] 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 136/142] 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 137/142] =?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=20?=
 =?UTF-8?q?autofix=20for=20pretty-format-json=20hook=20=F0=9F=94=A7=20(.es?=
 =?UTF-8?q?lintrc.json):=20Update=20eslint=20configuration=20to=20include?=
 =?UTF-8?q?=20additional=20plugins,=20parser,=20parserOptions,=20and=20env?=
 =?UTF-8?q?=20settings?=
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 138/142] 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 139/142] 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 140/142] 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 141/142] =?UTF-8?q?=E2=9C=A8=20(IOModal/index.tsx):=20chan?=
 =?UTF-8?q?ge=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 142/142] =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20add=20`co?=
 =?UTF-8?q?nvertTestName`=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();
+});