From 86ccae87fb4e59f8ff3e8f9c6bf4c1ee6811d0f3 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 5 Feb 2024 11:42:08 -0300
Subject: [PATCH 01/83] Feat: make text input capable of support dropdown
 inputs also

---
 .../src/components/inputComponent/index.tsx   | 169 +++++++++++++++---
 src/frontend/src/style/applies.css            |   2 +-
 src/frontend/src/types/components/index.ts    |   1 +
 3 files changed, 142 insertions(+), 30 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 8017c5458f..a91d0a40d2 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -1,8 +1,10 @@
+import { Listbox, Transition } from "@headlessui/react";
 import * as Form from "@radix-ui/react-form";
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
+import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
 
 export default function InputComponent({
@@ -19,9 +21,11 @@ export default function InputComponent({
   className,
   id = "",
   blurOnEnter = false,
+  options = [],
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
+  const [showOptions, setShowOptions] = useState<boolean>(false);
   // Clear component state
   useEffect(() => {
     if (disabled && value !== "") {
@@ -29,6 +33,11 @@ export default function InputComponent({
     }
   }, [disabled]);
 
+  function onInputLostFocus(event): void {
+    if (onBlur) onBlur(event);
+    setShowOptions(false);
+  }
+
   return (
     <div className="relative w-full">
       {isForm ? (
@@ -36,7 +45,7 @@ export default function InputComponent({
           <Input
             id={"form-" + id}
             ref={refInput}
-            onBlur={onBlur}
+            onBlur={onInputLostFocus}
             autoFocus={autoFocus}
             type={password && !pwdVisible ? "password" : "text"}
             value={value}
@@ -65,34 +74,136 @@ export default function InputComponent({
           />
         </Form.Control>
       ) : (
-        <Input
-          id={id}
-          ref={refInput}
-          type="text"
-          onBlur={onBlur}
-          value={value}
-          autoFocus={autoFocus}
-          disabled={disabled}
-          required={required}
-          className={classNames(
-            password && !pwdVisible && value !== ""
-              ? " text-clip password "
-              : "",
-            editNode ? " input-edit-node " : "",
-            password && editNode ? "pr-8" : "",
-            password && !editNode ? "pr-10" : "",
-            className!
-          )}
-          placeholder={password && editNode ? "Key" : placeholder}
-          onChange={(e) => {
-            onChange(e.target.value);
-          }}
-          onKeyDown={(e) => {
-            handleKeyDown(e, value, "");
-            if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
-          }}
-        />
+        <>
+          <Input
+            id={id}
+            ref={refInput}
+            type="text"
+            onBlur={(e) => setShowOptions(false)}
+            value={value}
+            autoFocus={autoFocus}
+            disabled={disabled}
+            required={required}
+            className={classNames(
+              password && !pwdVisible && value !== ""
+                ? " text-clip password "
+                : "",
+              editNode ? " input-edit-node " : "",
+              password && editNode ? "pr-8" : "",
+              password && !editNode ? "pr-10" : "",
+              className!
+            )}
+            placeholder={password && editNode ? "Key" : placeholder}
+            onChange={(e) => {
+              onChange(e.target.value);
+              setShowOptions(false);
+            }}
+            onKeyDown={(e) => {
+              handleKeyDown(e, value, "");
+              if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
+            }}
+            onFocus={() => setShowOptions(true)}
+          />
+          {
+            /* options.length > 0 */ true ? (
+              <Listbox
+                onChange={(val) => {
+                  onChange(val);
+                }}
+              >
+                <>
+                  <div className={"relative mt-1"}>
+                    <Transition
+                      show={showOptions}
+                      as={Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Listbox.Options
+                        className={classNames(
+                          editNode
+                            ? "dropdown-component-true-options nowheel custom-scroll"
+                            : "dropdown-component-false-options nowheel custom-scroll",
+                          false ? "mb-2 w-[250px]" : "absolute w-full"
+                        )}
+                      >
+                        {["key", "key2", "key3", "key4", "key5"].map(
+                          (option, id) => (
+                            <Listbox.Option
+                              key={id}
+                              className={({ active }) =>
+                                classNames(
+                                  active ? " bg-accent" : "",
+                                  editNode
+                                    ? "dropdown-component-false-option"
+                                    : "dropdown-component-true-option",
+                                  " hover:bg-accent"
+                                )
+                              }
+                              value={option}
+                            >
+                              {({ selected, active }) => (
+                                <>
+                                  <span
+                                    className={classNames(
+                                      selected
+                                        ? "font-semibold"
+                                        : "font-normal",
+                                      "block truncate "
+                                    )}
+                                    data-testid={`${option}-${id ?? ""}-option`}
+                                  >
+                                    {option}
+                                  </span>
+
+                                  {selected ? (
+                                    <span
+                                      className={classNames(
+                                        active ? "text-background " : "",
+                                        "dropdown-component-choosal"
+                                      )}
+                                    >
+                                      <IconComponent
+                                        name="Check"
+                                        className={
+                                          active
+                                            ? "dropdown-component-check-icon"
+                                            : "dropdown-component-check-icon"
+                                        }
+                                        aria-hidden="true"
+                                      />
+                                    </span>
+                                  ) : null}
+                                </>
+                              )}
+                            </Listbox.Option>
+                          )
+                        )}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                </>
+              </Listbox>
+            ) : null
+          }
+        </>
       )}
+
+      <span
+        className={
+          password
+            ? "dropdown-component-arrow  right-8"
+            : "dropdown-component-arrow right-0"
+        }
+      >
+        <IconComponent
+          name="ChevronsUpDown"
+          className="dropdown-component-arrow-color"
+          aria-hidden="true"
+        />
+      </span>
+
       {password && (
         <button
           type="button"
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index e2bcdb7d9e..2da11313e0 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -422,7 +422,7 @@
     @apply block w-full truncate bg-background;
   }
   .dropdown-component-arrow {
-    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2;
+    @apply pointer-events-none absolute inset-y-0 flex items-center pr-2;
   }
   .dropdown-component-arrow-color {
     @apply extra-side-bar-save-disable h-5 w-5;
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index d78ce867c0..d9f9a031bb 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -20,6 +20,7 @@ export type InputComponentType = {
   className?: string;
   id?: string;
   blurOnEnter?: boolean;
+  options?: string[];
 };
 export type ToggleComponentType = {
   enabled: boolean;

From 5eef2774a244b8b57be2cf3ea37786064f1791c6 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 5 Feb 2024 11:45:35 -0300
Subject: [PATCH 02/83] Remove blank space

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

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index a91d0a40d2..fb7e7bfca0 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -112,7 +112,7 @@ export default function InputComponent({
                 }}
               >
                 <>
-                  <div className={"relative mt-1"}>
+                  <div className={"relative mt-1 "}>
                     <Transition
                       show={showOptions}
                       as={Fragment}

From 1be52e253a014059a132eabc33f117af9e226e67 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 5 Feb 2024 14:09:33 -0300
Subject: [PATCH 03/83] Fix: arrow icon dont appear in dropdown

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

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index db488aaac7..693051b8eb 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -49,7 +49,7 @@ export default function Dropdown({
                     >
                       {internalValue}
                     </span>
-                    <span className={"dropdown-component-arrow"}>
+                    <span className={"dropdown-component-arrow right-0"}>
                       <IconComponent
                         name="ChevronsUpDown"
                         className="dropdown-component-arrow-color"

From 0a0f35cdac46baa8bc51688abc51a5f9ad814a65 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 14:16:40 -0300
Subject: [PATCH 04/83] Add global variable API functions

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

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index ef3b6d228b..88bf232224 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -850,3 +850,48 @@ export async function requestLogout() {
     throw error;
   }
 }
+
+export async function getGlobalVariables() {
+  // mocked for now but will eventually be a real API call
+  const globalVariables = window.sessionStorage.getItem("globalVariables");
+  return globalVariables ? JSON.parse(globalVariables) : {};
+}
+
+export async function registerGlobalVariable(name: string, value: string) {
+  // mocked for now but will eventually be a real API call
+  const globalVariables = window.sessionStorage.getItem("globalVariables");
+  const parsedGlobalVariables = globalVariables
+    ? JSON.parse(globalVariables)
+    : {};
+  parsedGlobalVariables[name] = value;
+  window.sessionStorage.setItem(
+    "globalVariables",
+    JSON.stringify(parsedGlobalVariables)
+  );
+}
+
+export async function deleteGlobalVariable(name: string) {
+  // mocked for now but will eventually be a real API call
+  const globalVariables = window.sessionStorage.getItem("globalVariables");
+  const parsedGlobalVariables = globalVariables
+    ? JSON.parse(globalVariables)
+    : {};
+  delete parsedGlobalVariables[name];
+  window.sessionStorage.setItem(
+    "globalVariables",
+    JSON.stringify(parsedGlobalVariables)
+  );
+}
+
+export async function updateGlobalVariable(name: string, value: string) {
+  // mocked for now but will eventually be a real API call
+  const globalVariables = window.sessionStorage.getItem("globalVariables");
+  const parsedGlobalVariables = globalVariables
+    ? JSON.parse(globalVariables)
+    : {};
+  parsedGlobalVariables[name] = value;
+  window.sessionStorage.setItem(
+    "globalVariables",
+    JSON.stringify(parsedGlobalVariables)
+  );
+}

From c1d9e12956bf5d5f0ac59b75c61a8bbd74349646 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 14:45:47 -0300
Subject: [PATCH 05/83] Add global variables store using Zustand

---
 src/frontend/src/stores/globalVariables.ts              | 9 +++++++++
 src/frontend/src/types/zustand/globalVariables/index.ts | 4 ++++
 2 files changed, 13 insertions(+)
 create mode 100644 src/frontend/src/stores/globalVariables.ts
 create mode 100644 src/frontend/src/types/zustand/globalVariables/index.ts

diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
new file mode 100644
index 0000000000..69a72f6779
--- /dev/null
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -0,0 +1,9 @@
+import { create } from "zustand";
+import { GlobalVariablesStore } from "../types/zustand/globalVariables";
+
+const useGlobalVariablesStore = create<GlobalVariablesStore>((set, get) => ({
+  globalVariables: [],
+  setGlobalVariables: (variables) => {
+    set({ globalVariables: variables });
+  },
+}));
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
new file mode 100644
index 0000000000..51f45a85cd
--- /dev/null
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -0,0 +1,4 @@
+export type GlobalVariablesStore = {
+  globalVariables: Array<string>;
+  setGlobalVariables: (variables: Array<string>) => void;
+};

From f30c1df9bf432e45c9ccbb7c78389019b31270a6 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 5 Feb 2024 14:53:47 -0300
Subject: [PATCH 06/83] Feat: make input dropdown filter with text

---
 .../src/components/inputComponent/index.tsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index fb7e7bfca0..720b41eb34 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -7,6 +7,7 @@ import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
 
+
 export default function InputComponent({
   autoFocus = false,
   onBlur,
@@ -26,6 +27,9 @@ export default function InputComponent({
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
+  const [filteredOpts, setFilteredValue] = useState<string[]>(["key", "key2", "key3", "key4", "key5"]);
+
+
   // Clear component state
   useEffect(() => {
     if (disabled && value !== "") {
@@ -33,11 +37,16 @@ export default function InputComponent({
     }
   }, [disabled]);
 
+
+  const filteredOptions = filteredOpts.filter((option) => option.toLowerCase().includes(value.toLowerCase()))
+
+
   function onInputLostFocus(event): void {
     if (onBlur) onBlur(event);
     setShowOptions(false);
   }
 
+
   return (
     <div className="relative w-full">
       {isForm ? (
@@ -79,7 +88,7 @@ export default function InputComponent({
             id={id}
             ref={refInput}
             type="text"
-            onBlur={(e) => setShowOptions(false)}
+            onBlur={onInputLostFocus}
             value={value}
             autoFocus={autoFocus}
             disabled={disabled}
@@ -96,7 +105,6 @@ export default function InputComponent({
             placeholder={password && editNode ? "Key" : placeholder}
             onChange={(e) => {
               onChange(e.target.value);
-              setShowOptions(false);
             }}
             onKeyDown={(e) => {
               handleKeyDown(e, value, "");
@@ -105,7 +113,7 @@ export default function InputComponent({
             onFocus={() => setShowOptions(true)}
           />
           {
-            /* options.length > 0 */ true ? (
+            /* options.length > 0 && filteredOptions.length > 0 */ true ? (
               <Listbox
                 onChange={(val) => {
                   onChange(val);
@@ -128,7 +136,7 @@ export default function InputComponent({
                           false ? "mb-2 w-[250px]" : "absolute w-full"
                         )}
                       >
-                        {["key", "key2", "key3", "key4", "key5"].map(
+                        {filteredOptions.map(
                           (option, id) => (
                             <Listbox.Option
                               key={id}
@@ -157,6 +165,7 @@ export default function InputComponent({
                                     {option}
                                   </span>
 
+
                                   {selected ? (
                                     <span
                                       className={classNames(
@@ -190,6 +199,7 @@ export default function InputComponent({
         </>
       )}
 
+
       <span
         className={
           password
@@ -204,6 +214,7 @@ export default function InputComponent({
         />
       </span>
 
+
       {password && (
         <button
           type="button"

From e4e5b061851439a7e3e26a0897bfd7b78f423d38 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 15:47:31 -0300
Subject: [PATCH 07/83] fix(App.tsx): import getGlobalVariables function from
 API controller to fix missing import error feat(App.tsx): add support for
 fetching global variables and setting them in the global variables store
 feat(App.tsx): add useGlobalVariablesStore hook to access and set global
 variables in the component feat(addNewVariableButton.tsx): create a new
 component for adding a new variable feat(GlobalVariablesPage.tsx): create
 GlobalVariablesPage component to display and manage global variables
 feat(routes.tsx): add route for GlobalVariablesPage component
 feat(globalVariables.ts): update globalVariables store to include
 globalVariablesEntries array and modify setGlobalVariables function to set
 both globalVariables and globalVariablesEntries feat(index.ts): add types for
 globalVariables store

---
 src/frontend/src/App.tsx                      |  9 ++++-
 src/frontend/src/controllers/API/index.ts     |  2 +-
 .../components/addNewVariableButton.tsx       | 38 +++++++++++++++++++
 .../src/pages/globalVariablesPage/index.tsx   | 26 +++++++++++++
 src/frontend/src/routes.tsx                   |  9 +++++
 src/frontend/src/stores/globalVariables.ts    | 18 ++++++---
 .../types/zustand/globalVariables/index.ts    |  5 ++-
 7 files changed, 97 insertions(+), 10 deletions(-)
 create mode 100644 src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
 create mode 100644 src/frontend/src/pages/globalVariablesPage/index.tsx

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index d126f5fa95..96cf5817a3 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -15,11 +15,12 @@ import {
   FETCH_ERROR_MESSAGE,
 } from "./constants/constants";
 import { AuthContext } from "./contexts/authContext";
-import { getHealth } from "./controllers/API";
+import { getGlobalVariables, getHealth } from "./controllers/API";
 import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
+import { useGlobalVariablesStore } from "./stores/globalVariables";
 import { useTypesStore } from "./stores/typesStore";
 
 export default function App() {
@@ -124,6 +125,9 @@ export default function App() {
   const getTypes = useTypesStore((state) => state.getTypes);
   const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
+  const setGlobalVariables = useGlobalVariablesStore(
+    (state) => state.setGlobalVariables
+  );
 
   useEffect(() => {
     refreshStars();
@@ -135,6 +139,9 @@ export default function App() {
       getTypes().then(() => {
         refreshFlows();
       });
+      getGlobalVariables().then((res) => {
+        setGlobalVariables(res);
+      });
     }
   }, [isAuthenticated]);
 
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 88bf232224..970500efe1 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -851,7 +851,7 @@ export async function requestLogout() {
   }
 }
 
-export async function getGlobalVariables() {
+export async function getGlobalVariables(): Promise<{ [key: string]: string }> {
   // mocked for now but will eventually be a real API call
   const globalVariables = window.sessionStorage.getItem("globalVariables");
   return globalVariables ? JSON.parse(globalVariables) : {};
diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
new file mode 100644
index 0000000000..59e86fe3e4
--- /dev/null
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -0,0 +1,38 @@
+import { Button } from "../../../components/ui/button";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import BaseModal from "../../../modals/baseModal";
+
+//TODO IMPLEMENT FORM LOGIC
+
+export default function AddNewVariableButton(): JSX.Element {
+  function handleSaveVariable() {}
+  return (
+    <BaseModal size="small">
+      <BaseModal.Header
+        description={"write a text variable to use anywhere on your flow"}
+      >
+        <span>Create a new Variable</span>
+      </BaseModal.Header>
+      <BaseModal.Trigger>
+        <Button>Create a new variable</Button>
+      </BaseModal.Trigger>
+      <BaseModal.Content>
+        <div className="flex h-full w-full flex-col justify-around align-middle">
+          <div className="h-1/2">
+            <Label>Variable name </Label>
+            <Input placeholder="example name"></Input>
+          </div>
+          <div className="h-1/2">
+            <Label>Variable Value </Label>
+            <Textarea className="h-4/6 w-full resize-none custom-scroll" />
+          </div>
+        </div>
+      </BaseModal.Content>
+      <BaseModal.Footer>
+        <Button onClick={handleSaveVariable}>Save variable</Button>
+      </BaseModal.Footer>
+    </BaseModal>
+  );
+}
diff --git a/src/frontend/src/pages/globalVariablesPage/index.tsx b/src/frontend/src/pages/globalVariablesPage/index.tsx
new file mode 100644
index 0000000000..c70ec8a026
--- /dev/null
+++ b/src/frontend/src/pages/globalVariablesPage/index.tsx
@@ -0,0 +1,26 @@
+import PageLayout from "../../components/pageLayout";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
+import AddNewVariableButton from "./components/addNewVariableButton";
+
+export default function GlobalVariablesPage() {
+  const globalVariables = useGlobalVariablesStore(
+    (state) => state.globalVariables
+  );
+  return (
+    <PageLayout
+      title="Variables"
+      description="set your own personal varaibles and use it on your flow"
+    >
+      {Object.keys(globalVariables).length > 0 ? (
+        <div></div>
+      ) : (
+        <div className="flex h-full w-full flex-col items-center justify-center align-middle">
+          <div>
+            <p> create your first variable</p>
+            <AddNewVariableButton />
+          </div>
+        </div>
+      )}
+    </PageLayout>
+  );
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index b48e5147d2..0c3cd1ac8c 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -15,6 +15,7 @@ import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
+import GlobalVariablesPage from "./pages/globalVariablesPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
 
@@ -153,6 +154,14 @@ const Router = () => {
           }
         ></Route>
       </Route>
+      <Route
+        path="variables"
+        element={
+          <ProtectedRoute>
+            <GlobalVariablesPage />
+          </ProtectedRoute>
+        }
+      ></Route>
     </Routes>
   );
 };
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 69a72f6779..c71986090c 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -1,9 +1,15 @@
 import { create } from "zustand";
 import { GlobalVariablesStore } from "../types/zustand/globalVariables";
 
-const useGlobalVariablesStore = create<GlobalVariablesStore>((set, get) => ({
-  globalVariables: [],
-  setGlobalVariables: (variables) => {
-    set({ globalVariables: variables });
-  },
-}));
+export const useGlobalVariablesStore = create<GlobalVariablesStore>(
+  (set, get) => ({
+    globalVariablesEntries: [],
+    globalVariables: {},
+    setGlobalVariables: (variables) => {
+      set({
+        globalVariables: variables,
+        globalVariablesEntries: Object.keys(variables),
+      });
+    },
+  })
+);
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 51f45a85cd..df9c29d026 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -1,4 +1,5 @@
 export type GlobalVariablesStore = {
-  globalVariables: Array<string>;
-  setGlobalVariables: (variables: Array<string>) => void;
+  globalVariablesEntries: Array<string>;
+  globalVariables: { [key: string]: string };
+  setGlobalVariables: (variables: { [key: string]: string }) => void;
 };

From 911d6813208b3b27b51e8398b34e2a64f1b769b8 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 18:07:05 -0300
Subject: [PATCH 08/83] feat(addNewVariableButton.tsx): implement form logic to
 handle saving new global variables feat(globalVariables.ts): add functions to
 add and remove global variables in the store feat(globalVariables/index.ts):
 add types for the new functions in the global variables store

---
 .../components/addNewVariableButton.tsx       | 24 ++++++++++++++++---
 src/frontend/src/stores/globalVariables.ts    | 15 ++++++++++++
 .../types/zustand/globalVariables/index.ts    |  2 ++
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index 59e86fe3e4..17f815c60c 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -1,13 +1,19 @@
+import { useState } from "react";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
 import { Label } from "../../../components/ui/label";
 import { Textarea } from "../../../components/ui/textarea";
+import { registerGlobalVariable } from "../../../controllers/API";
 import BaseModal from "../../../modals/baseModal";
 
 //TODO IMPLEMENT FORM LOGIC
 
 export default function AddNewVariableButton(): JSX.Element {
-  function handleSaveVariable() {}
+  const [key, setKey] = useState("");
+  const [value, setValue] = useState("");
+  function handleSaveVariable() {
+    registerGlobalVariable(key, value).then((_) => {});
+  }
   return (
     <BaseModal size="small">
       <BaseModal.Header
@@ -22,11 +28,23 @@ export default function AddNewVariableButton(): JSX.Element {
         <div className="flex h-full w-full flex-col justify-around align-middle">
           <div className="h-1/2">
             <Label>Variable name </Label>
-            <Input placeholder="example name"></Input>
+            <Input
+              value={key}
+              onChange={(e) => {
+                setKey(e.target.value);
+              }}
+              placeholder="example name"
+            ></Input>
           </div>
           <div className="h-1/2">
             <Label>Variable Value </Label>
-            <Textarea className="h-4/6 w-full resize-none custom-scroll" />
+            <Textarea
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+              className="h-4/6 w-full resize-none custom-scroll"
+            />
           </div>
         </div>
       </BaseModal.Content>
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index c71986090c..8eaaa32827 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -11,5 +11,20 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(variables),
       });
     },
+    addGlobalVariable: (key, value) => {
+      const newVariables = { ...get().globalVariables, [key]: value };
+      set({
+        globalVariables: newVariables,
+        globalVariablesEntries: Object.keys(newVariables),
+      });
+    },
+    removeGlobalVariable: (key) => {
+      const newVariables = { ...get().globalVariables };
+      delete newVariables[key];
+      set({
+        globalVariables: newVariables,
+        globalVariablesEntries: Object.keys(newVariables),
+      });
+    },
   })
 );
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index df9c29d026..5e8808d94c 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -2,4 +2,6 @@ export type GlobalVariablesStore = {
   globalVariablesEntries: Array<string>;
   globalVariables: { [key: string]: string };
   setGlobalVariables: (variables: { [key: string]: string }) => void;
+  addGlobalVariable: (key: string, value: string) => void;
+  removeGlobalVariable: (key: string) => void;
 };

From 4a1c9f8daeefb300c070277e4b9bd9853af3808a Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 18:30:41 -0300
Subject: [PATCH 09/83] Add global variable functionality and display on Global
 Variables page

---
 .../src/components/inputComponent/index.tsx   | 110 +++++++++---------
 .../components/addNewVariableButton.tsx       |   8 +-
 .../src/pages/globalVariablesPage/index.tsx   |  15 ++-
 3 files changed, 71 insertions(+), 62 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 720b41eb34..2762c5d21a 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -7,7 +7,6 @@ import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
 
-
 export default function InputComponent({
   autoFocus = false,
   onBlur,
@@ -27,8 +26,13 @@ export default function InputComponent({
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
-  const [filteredOpts, setFilteredValue] = useState<string[]>(["key", "key2", "key3", "key4", "key5"]);
-
+  const [filteredOpts, setFilteredValue] = useState<string[]>([
+    "key",
+    "key2",
+    "key3",
+    "key4",
+    "key5",
+  ]);
 
   // Clear component state
   useEffect(() => {
@@ -37,16 +41,15 @@ export default function InputComponent({
     }
   }, [disabled]);
 
-
-  const filteredOptions = filteredOpts.filter((option) => option.toLowerCase().includes(value.toLowerCase()))
-
+  const filteredOptions = filteredOpts.filter((option) =>
+    option.toLowerCase().includes(value.toLowerCase())
+  );
 
   function onInputLostFocus(event): void {
     if (onBlur) onBlur(event);
     setShowOptions(false);
   }
 
-
   return (
     <div className="relative w-full">
       {isForm ? (
@@ -136,59 +139,54 @@ export default function InputComponent({
                           false ? "mb-2 w-[250px]" : "absolute w-full"
                         )}
                       >
-                        {filteredOptions.map(
-                          (option, id) => (
-                            <Listbox.Option
-                              key={id}
-                              className={({ active }) =>
-                                classNames(
-                                  active ? " bg-accent" : "",
-                                  editNode
-                                    ? "dropdown-component-false-option"
-                                    : "dropdown-component-true-option",
-                                  " hover:bg-accent"
-                                )
-                              }
-                              value={option}
-                            >
-                              {({ selected, active }) => (
-                                <>
+                        {filteredOptions.map((option, id) => (
+                          <Listbox.Option
+                            key={id}
+                            className={({ active }) =>
+                              classNames(
+                                active ? " bg-accent" : "",
+                                editNode
+                                  ? "dropdown-component-false-option"
+                                  : "dropdown-component-true-option",
+                                " hover:bg-accent"
+                              )
+                            }
+                            value={option}
+                          >
+                            {({ selected, active }) => (
+                              <>
+                                <span
+                                  className={classNames(
+                                    selected ? "font-semibold" : "font-normal",
+                                    "block truncate "
+                                  )}
+                                  data-testid={`${option}-${id ?? ""}-option`}
+                                >
+                                  {option}
+                                </span>
+
+                                {selected ? (
                                   <span
                                     className={classNames(
-                                      selected
-                                        ? "font-semibold"
-                                        : "font-normal",
-                                      "block truncate "
+                                      active ? "text-background " : "",
+                                      "dropdown-component-choosal"
                                     )}
-                                    data-testid={`${option}-${id ?? ""}-option`}
                                   >
-                                    {option}
+                                    <IconComponent
+                                      name="Check"
+                                      className={
+                                        active
+                                          ? "dropdown-component-check-icon"
+                                          : "dropdown-component-check-icon"
+                                      }
+                                      aria-hidden="true"
+                                    />
                                   </span>
-
-
-                                  {selected ? (
-                                    <span
-                                      className={classNames(
-                                        active ? "text-background " : "",
-                                        "dropdown-component-choosal"
-                                      )}
-                                    >
-                                      <IconComponent
-                                        name="Check"
-                                        className={
-                                          active
-                                            ? "dropdown-component-check-icon"
-                                            : "dropdown-component-check-icon"
-                                        }
-                                        aria-hidden="true"
-                                      />
-                                    </span>
-                                  ) : null}
-                                </>
-                              )}
-                            </Listbox.Option>
-                          )
-                        )}
+                                ) : null}
+                              </>
+                            )}
+                          </Listbox.Option>
+                        ))}
                       </Listbox.Options>
                     </Transition>
                   </div>
@@ -199,7 +197,6 @@ export default function InputComponent({
         </>
       )}
 
-
       <span
         className={
           password
@@ -214,7 +211,6 @@ export default function InputComponent({
         />
       </span>
 
-
       {password && (
         <button
           type="button"
diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index 17f815c60c..108bc8b0a3 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -5,14 +5,20 @@ import { Label } from "../../../components/ui/label";
 import { Textarea } from "../../../components/ui/textarea";
 import { registerGlobalVariable } from "../../../controllers/API";
 import BaseModal from "../../../modals/baseModal";
+import { useGlobalVariablesStore } from "../../../stores/globalVariables";
 
 //TODO IMPLEMENT FORM LOGIC
 
 export default function AddNewVariableButton(): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
+  const addGlobalVariable = useGlobalVariablesStore(
+    (state) => state.addGlobalVariable
+  );
   function handleSaveVariable() {
-    registerGlobalVariable(key, value).then((_) => {});
+    registerGlobalVariable(key, value).then((_) => {
+      addGlobalVariable(key, value);
+    });
   }
   return (
     <BaseModal size="small">
diff --git a/src/frontend/src/pages/globalVariablesPage/index.tsx b/src/frontend/src/pages/globalVariablesPage/index.tsx
index c70ec8a026..b8360e7a06 100644
--- a/src/frontend/src/pages/globalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/index.tsx
@@ -3,16 +3,23 @@ import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import AddNewVariableButton from "./components/addNewVariableButton";
 
 export default function GlobalVariablesPage() {
-  const globalVariables = useGlobalVariablesStore(
-    (state) => state.globalVariables
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
   );
   return (
     <PageLayout
       title="Variables"
       description="set your own personal varaibles and use it on your flow"
     >
-      {Object.keys(globalVariables).length > 0 ? (
-        <div></div>
+      {globalVariablesEntries.length > 0 ? (
+        <div className="flex h-full w-full flex-col justify-around">
+          {globalVariablesEntries.map((key, index) => (
+            <div className="flex w-full items-start" key={index}>
+              <span>{key}</span>
+            </div>
+          ))}
+          <AddNewVariableButton />
+        </div>
       ) : (
         <div className="flex h-full w-full flex-col items-center justify-center align-middle">
           <div>

From d0dcb32a7ea3676e731f457c6a35445e2efae238 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 18:50:58 -0300
Subject: [PATCH 10/83] Refactor global variables page and add delete
 functionality

---
 .../components/addNewVariableButton.tsx         |  6 +++++-
 .../src/pages/globalVariablesPage/index.tsx     | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index 108bc8b0a3..f30cdbc557 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -12,16 +12,20 @@ import { useGlobalVariablesStore } from "../../../stores/globalVariables";
 export default function AddNewVariableButton(): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
+  const [open, setOpen] = useState(false);
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
   function handleSaveVariable() {
     registerGlobalVariable(key, value).then((_) => {
       addGlobalVariable(key, value);
+      setKey("");
+      setValue("");
+      setOpen(false);
     });
   }
   return (
-    <BaseModal size="small">
+    <BaseModal open={open} setOpen={setOpen} size="small">
       <BaseModal.Header
         description={"write a text variable to use anywhere on your flow"}
       >
diff --git a/src/frontend/src/pages/globalVariablesPage/index.tsx b/src/frontend/src/pages/globalVariablesPage/index.tsx
index b8360e7a06..40c2322f73 100644
--- a/src/frontend/src/pages/globalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/index.tsx
@@ -1,11 +1,23 @@
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
+import { deleteGlobalVariable } from "../../controllers/API";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import AddNewVariableButton from "./components/addNewVariableButton";
 
+//TODO: improve UI
+
 export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
   );
+  const removeGlobalVariable = useGlobalVariablesStore(
+    (state) => state.removeGlobalVariable
+  );
+
+  function handleDelete(key: string) {
+    deleteGlobalVariable(key).then((_) => removeGlobalVariable(key));
+  }
   return (
     <PageLayout
       title="Variables"
@@ -16,6 +28,11 @@ export default function GlobalVariablesPage() {
           {globalVariablesEntries.map((key, index) => (
             <div className="flex w-full items-start" key={index}>
               <span>{key}</span>
+              <ShadTooltip content="Delete">
+                <button onClick={(_) => handleDelete(key)} className="ml-auto">
+                  <IconComponent name="Trash2" />
+                </button>
+              </ShadTooltip>
             </div>
           ))}
           <AddNewVariableButton />

From 476a670eb9d84fdcce8764492924e72c5c6cd2e7 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 5 Feb 2024 18:58:37 -0300
Subject: [PATCH 11/83] Add global variables support to InputComponent

---
 .../src/components/inputComponent/index.tsx        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 2762c5d21a..d0e6b3c770 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -1,6 +1,7 @@
 import { Listbox, Transition } from "@headlessui/react";
 import * as Form from "@radix-ui/react-form";
 import { Fragment, useEffect, useRef, useState } from "react";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
@@ -26,13 +27,12 @@ export default function InputComponent({
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
-  const [filteredOpts, setFilteredValue] = useState<string[]>([
-    "key",
-    "key2",
-    "key3",
-    "key4",
-    "key5",
-  ]);
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
+  );
+  const [filteredOpts, setFilteredValue] = useState<string[]>(
+    globalVariablesEntries
+  );
 
   // Clear component state
   useEffect(() => {

From 15589344298deb0c1cb1f40e2272c682872df8ba Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 6 Feb 2024 19:04:32 -0300
Subject: [PATCH 12/83] Add delete_credential endpoint to API

---
 src/backend/langflow/api/v1/credential.py | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/backend/langflow/api/v1/credential.py b/src/backend/langflow/api/v1/credential.py
index 1026319c46..53d5a12152 100644
--- a/src/backend/langflow/api/v1/credential.py
+++ b/src/backend/langflow/api/v1/credential.py
@@ -84,3 +84,25 @@ def update_credential(
         return db_credential
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e)) from e
+
+
+@router.delete("/{credential_id}", response_model=CredentialRead, status_code=200)
+def delete_credential(
+    *,
+    session: Session = Depends(get_session),
+    credential_id: UUID,
+    current_user: User = Depends(get_current_active_user),
+):
+    """Delete a credential."""
+    try:
+        db_credential = session.exec(
+            select(Credential).where(Credential.id == credential_id, Credential.user_id == current_user.id)
+        ).first()
+        if not db_credential:
+            raise HTTPException(status_code=404, detail="Credential not found")
+
+        session.delete(db_credential)
+        session.commit()
+        return db_credential
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e

From 84f4c320769e02719b800e4d2a833f9bc196b6c7 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 6 Feb 2024 19:14:52 -0300
Subject: [PATCH 13/83] Refactor Credential model to use Optional for provider
 field

---
 .../langflow/services/database/models/credential/model.py    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/backend/langflow/services/database/models/credential/model.py b/src/backend/langflow/services/database/models/credential/model.py
index 95bd4b829b..5c9f7d9b0e 100644
--- a/src/backend/langflow/services/database/models/credential/model.py
+++ b/src/backend/langflow/services/database/models/credential/model.py
@@ -2,9 +2,8 @@
 from typing import TYPE_CHECKING, Optional
 from uuid import UUID, uuid4
 
-from sqlmodel import Field, Relationship, SQLModel
-
 from langflow.services.database.models.credential.schema import CredentialType
+from sqlmodel import Field, Relationship, SQLModel
 
 if TYPE_CHECKING:
     from langflow.services.database.models.user import User
@@ -28,7 +27,7 @@ class Credential(CredentialBase, table=True):
 
 class CredentialCreate(CredentialBase):
     # AcceptedProviders is a custom Enum
-    provider: CredentialType = Field(description="Provider of the credential (e.g OpenAI)")
+    provider: Optional[CredentialType] = Field(None, description="Provider of the credential (e.g OpenAI)")
 
 
 class CredentialRead(SQLModel):

From 937a50498a76e2ecbafdb3b307f3c88a1c400467 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 6 Feb 2024 21:16:27 -0300
Subject: [PATCH 14/83] Add load_from_db_fields attribute to Vertex class

---
 src/backend/langflow/graph/vertex/base.py | 59 +++++++++++++----------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/backend/langflow/graph/vertex/base.py b/src/backend/langflow/graph/vertex/base.py
index bd38186e15..4d7b627673 100644
--- a/src/backend/langflow/graph/vertex/base.py
+++ b/src/backend/langflow/graph/vertex/base.py
@@ -36,6 +36,7 @@ def __init__(
         self.is_task = is_task
         self.params = params or {}
         self.parent_node_id: Optional[str] = self._data.get("parent_node_id")
+        self.load_from_db_fields: List[str] = []
         self.parent_is_top_level = False
 
     @property
@@ -53,6 +54,7 @@ def __getstate__(self):
             "_built": False,
             "parent_node_id": self.parent_node_id,
             "parent_is_top_level": self.parent_is_top_level,
+            "load_from_db_fields": self.load_from_db_fields,
         }
 
     def __setstate__(self, state):
@@ -72,6 +74,7 @@ def __setstate__(self, state):
         self.task_id: Optional[str] = None
         self.parent_node_id = state["parent_node_id"]
         self.parent_is_top_level = state["parent_is_top_level"]
+        self.load_from_db_fields = state["load_from_db_fields"]
 
     def set_top_level(self, top_level_vertices: List[str]) -> None:
         self.parent_is_top_level = self.parent_node_id in top_level_vertices
@@ -151,60 +154,65 @@ def _build_params(self):
                 elif edge.target_id == self.id:
                     params[param_key] = self.graph.get_vertex(edge.source_id)
 
-        for key, value in template_dict.items():
-            if key in params:
+        load_from_db_fields = []
+        for field_name, field in template_dict.items():
+            if field_name in params:
                 continue
             # Skip _type and any value that has show == False and is not code
             # If we don't want to show code but we want to use it
-            if key == "_type" or (not value.get("show") and key != "code"):
+            if field_name == "_type" or (not field.get("show") and field_name != "code"):
                 continue
             # If the type is not transformable to a python base class
             # then we need to get the edge that connects to this node
-            if value.get("type") == "file":
+            if field.get("type") == "file":
                 # Load the type in value.get('fileTypes') using
                 # what is inside value.get('content')
                 # value.get('value') is the file name
-                if file_path := value.get("file_path"):
-                    params[key] = file_path
+                if file_path := field.get("file_path"):
+                    params[field_name] = file_path
                 else:
                     raise ValueError(f"File path not found for {self.vertex_type}")
-            elif value.get("type") in DIRECT_TYPES and params.get(key) is None:
-                val = value.get("value")
-                if value.get("type") == "code":
+            elif field.get("type") in DIRECT_TYPES and params.get(field_name) is None:
+                val = field.get("value")
+                if field.get("type") == "code":
                     try:
-                        params[key] = ast.literal_eval(val) if val else None
+                        params[field_name] = ast.literal_eval(val) if val else None
                     except Exception as exc:
                         logger.debug(f"Error parsing code: {exc}")
-                        params[key] = val
-                elif value.get("type") in ["dict", "NestedDict"]:
+                        params[field_name] = val
+                elif field.get("type") in ["dict", "NestedDict"]:
                     # When dict comes from the frontend it comes as a
                     # list of dicts, so we need to convert it to a dict
                     # before passing it to the build method
                     if isinstance(val, list):
-                        params[key] = {k: v for item in value.get("value", []) for k, v in item.items()}
+                        params[field_name] = {k: v for item in field.get("value", []) for k, v in item.items()}
                     elif isinstance(val, dict):
-                        params[key] = val
-                elif value.get("type") == "int" and val is not None:
+                        params[field_name] = val
+                elif field.get("type") == "int" and val is not None:
                     try:
-                        params[key] = int(val)
+                        params[field_name] = int(val)
                     except ValueError:
-                        params[key] = val
-                elif value.get("type") == "float" and val is not None:
+                        params[field_name] = val
+                elif field.get("type") == "float" and val is not None:
                     try:
-                        params[key] = float(val)
+                        params[field_name] = float(val)
                     except ValueError:
-                        params[key] = val
+                        params[field_name] = val
+
                 elif val is not None and val != "":
-                    params[key] = val
+                    params[field_name] = val
+                if field.get("load_from_db"):
+                    load_from_db_fields.append(field_name)
 
-            if not value.get("required") and params.get(key) is None:
-                if value.get("default"):
-                    params[key] = value.get("default")
+            if not field.get("required") and params.get(field_name) is None:
+                if field.get("default"):
+                    params[field_name] = field.get("default")
                 else:
-                    params.pop(key, None)
+                    params.pop(field_name, None)
         # Add _type to params
         self._raw_params = params
         self.params = params
+        self.load_from_db_fields = load_from_db_fields
 
     async def _build(self, user_id=None):
         """
@@ -321,6 +329,7 @@ async def _get_and_instantiate_class(self, user_id=None):
             result = await loading.instantiate_class(
                 node_type=self.vertex_type,
                 base_type=self.base_type,
+                load_from_db_fields=self.load_from_db_fields,
                 params=self.params,
                 user_id=user_id,
             )

From 108d0b2e125068b0facd467dd6514ee72dbef3b9 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 6 Feb 2024 21:16:34 -0300
Subject: [PATCH 15/83] Refactor class instantiation and update params with
 load_from_db_fields

---
 .../langflow/interface/initialize/loading.py  | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/backend/langflow/interface/initialize/loading.py b/src/backend/langflow/interface/initialize/loading.py
index 652cd1a0c7..00fdf07731 100644
--- a/src/backend/langflow/interface/initialize/loading.py
+++ b/src/backend/langflow/interface/initialize/loading.py
@@ -11,9 +11,6 @@
 from langchain.document_loaders.base import BaseLoader
 from langchain_community.vectorstores import VectorStore
 from langchain_core.documents import Document
-from loguru import logger
-from pydantic import ValidationError
-
 from langflow.interface.custom_lists import CUSTOM_NODES
 from langflow.interface.importing.utils import eval_custom_component_code, get_function, import_by_type
 from langflow.interface.initialize.llm import initialize_vertexai
@@ -25,6 +22,8 @@
 from langflow.interface.utils import load_file_into_dict
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.utils import validate
+from loguru import logger
+from pydantic import ValidationError
 
 if TYPE_CHECKING:
     from langflow import CustomComponent
@@ -37,7 +36,9 @@ def build_vertex_in_params(params: Dict) -> Dict:
     return {key: value.build() if isinstance(value, Vertex) else value for key, value in params.items()}
 
 
-async def instantiate_class(node_type: str, base_type: str, params: Dict, user_id=None) -> Any:
+async def instantiate_class(
+    node_type: str, base_type: str, load_from_db_fields: list[str], params: Dict, user_id=None
+) -> Any:
     """Instantiate class from module type and key, and params"""
     params = convert_params_to_sets(params)
     params = convert_kwargs(params)
@@ -49,7 +50,9 @@ async def instantiate_class(node_type: str, base_type: str, params: Dict, user_i
             return custom_node(**params)
     logger.debug(f"Instantiating {node_type} of type {base_type}")
     class_object = import_by_type(_type=base_type, name=node_type)
-    return await instantiate_based_on_type(class_object, base_type, node_type, params, user_id=user_id)
+    return await instantiate_based_on_type(
+        class_object, base_type, node_type, load_from_db_fields, params, user_id=user_id
+    )
 
 
 def convert_params_to_sets(params):
@@ -76,7 +79,7 @@ def convert_kwargs(params):
     return params
 
 
-async def instantiate_based_on_type(class_object, base_type, node_type, params, user_id):
+async def instantiate_based_on_type(class_object, base_type, node_type, load_from_db_fields, params, user_id):
     if base_type == "agents":
         return instantiate_agent(node_type, class_object, params)
     elif base_type == "prompts":
@@ -110,18 +113,32 @@ async def instantiate_based_on_type(class_object, base_type, node_type, params,
     elif base_type == "memory":
         return instantiate_memory(node_type, class_object, params)
     elif base_type == "custom_components":
-        return await instantiate_custom_component(node_type, class_object, params, user_id)
+        return await instantiate_custom_component(node_type, class_object, load_from_db_fields, params, user_id)
     elif base_type == "wrappers":
         return instantiate_wrapper(node_type, class_object, params)
     else:
         return class_object(**params)
 
 
-async def instantiate_custom_component(node_type, class_object, params, user_id):
+def update_params_with_load_from_db_fields(custom_component, params, load_from_db_fields):
+    # For each field in load_from_db_fields, we will check if it's in the params
+    # and if it is, we will get the value from the custom_component.keys(name)
+    # and update the params with the value
+    for field in load_from_db_fields:
+        if field in params:
+            try:
+                params[field] = custom_component.keys(field)
+            except Exception as exc:
+                logger.error(f"Failed to get value for {field} from custom component. Error: {exc}")
+                pass
+    return params
+
+
+async def instantiate_custom_component(node_type, class_object, load_from_db_fields, params, user_id):
     params_copy = params.copy()
     class_object: "CustomComponent" = eval_custom_component_code(params_copy.pop("code"))
     custom_component = class_object(user_id=user_id)
-
+    params_copy = update_params_with_load_from_db_fields(custom_component, params_copy, load_from_db_fields)
     if "retriever" in params_copy and hasattr(params_copy["retriever"], "as_retriever"):
         params_copy["retriever"] = params_copy["retriever"].as_retriever()
 
@@ -497,3 +514,6 @@ def build_prompt_template(prompt, tools):
     }
 
     return prompt
+    return prompt
+    return prompt
+    return prompt

From ec1fe039749991635fa7c217cd3a31c2833c2d8c Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 6 Feb 2024 21:16:38 -0300
Subject: [PATCH 16/83] Update TemplateField class in base.py

---
 src/backend/langflow/template/field/base.py | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/template/field/base.py b/src/backend/langflow/template/field/base.py
index 021c0104df..5905877d6f 100644
--- a/src/backend/langflow/template/field/base.py
+++ b/src/backend/langflow/template/field/base.py
@@ -1,12 +1,12 @@
 from typing import Any, Callable, Optional, Union
 
-from pydantic import BaseModel, ConfigDict, Field, field_serializer
-
 from langflow.field_typing.range_spec import RangeSpec
+from pydantic import BaseModel, ConfigDict, Field, field_serializer
 
 
 class TemplateField(BaseModel):
     model_config = ConfigDict()
+
     field_type: str = Field(default="str", serialization_alias="type")
     """The type of field this is. Default is a string."""
 
@@ -64,6 +64,9 @@ class TemplateField(BaseModel):
     range_spec: Optional[RangeSpec] = Field(default=None, serialization_alias="rangeSpec")
     """Range specification for the field. Defaults to None."""
 
+    load_from_db: bool = False
+    """Specifies if the field should be loaded from the database. Defaults to False."""
+
     def to_dict(self):
         return self.model_dump(by_alias=True, exclude_none=True)
 

From 45e24058bd5394888d74246bd8b4718f285fc3fe Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 7 Feb 2024 14:01:31 -0300
Subject: [PATCH 17/83] feat(parameterComponent): add support for global
 variables in parameter input field

This commit adds support for global variables in the parameter input field of the ParameterComponent. It imports the useGlobalVariablesStore hook from the globalVariables store and uses it to access the globalVariablesEntries state. It also imports the setNoticeData function from the alert store to display a notice when a global variable is used as a parameter value.

In the onChange event handler of the input field, the commit checks if the entered value is a global variable by comparing it with the globalVariablesEntries array. If it is a global variable, the commit sets the notice data to inform the user that the real value will be updated during runtime. Additionally, the commit marks the parameter as a global variable by setting the load_from_db property of the template object to true in the setNode function.
---
 .../components/parameterComponent/index.tsx   | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 7201bba3b9..1119ebb896 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -24,6 +24,7 @@ import { postCustomComponentUpdate } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
@@ -66,6 +67,10 @@ export default function ParameterComponent({
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setNode = useFlowStore((state) => state.setNode);
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
+  );
+  const setNoticeData = useAlertStore((state) => state.setNoticeData);
 
   const flow = currentFlow?.data?.nodes ?? null;
 
@@ -408,7 +413,24 @@ export default function ParameterComponent({
                 disabled={disabled}
                 password={data.node?.template[name].password ?? false}
                 value={data.node?.template[name].value ?? ""}
-                onChange={handleOnNewValue}
+                onChange={(value) => {
+                  handleOnNewValue(value);
+                  if (globalVariablesEntries.includes(value)) {
+                    setNoticeData({
+                      title: `the value inserted in ${data.node?.display_name} is a global variable, \n 
+                    the real value will be update on run`,
+                    });
+                  }
+                  //mark as global variable
+                  setNode(data.id, (oldNode) => {
+                    let newNode = cloneDeep(oldNode);
+                    newNode.data = {
+                      ...newNode.data,
+                    };
+                    newNode.data.node.template[name].load_from_db = true;
+                    return newNode;
+                  });
+                }}
               />
             )}
           </div>

From a91668b5f2b54097526b46c2138c3b7432d09adb Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 8 Feb 2024 13:45:18 -0300
Subject: [PATCH 18/83] fix(parameterComponent): add options prop to
 ParameterComponent to display global variables in dropdown
 feat(codeTabsComponent): add support for global variables in InputComponent
 and DictComponent feat(inputComponent): remove dependency on
 globalVariablesStore and use options prop instead feat(editNodeModal): add
 support for global variables in InputComponent

---
 .../components/parameterComponent/index.tsx   |  1 +
 .../components/codeTabsComponent/index.tsx    | 19 ++++++++++
 .../src/components/inputComponent/index.tsx   | 36 +++++++++----------
 .../src/modals/EditNodeModal/index.tsx        | 28 +++++++++++++++
 4 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 1119ebb896..a32acce576 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -413,6 +413,7 @@ export default function ParameterComponent({
                 disabled={disabled}
                 password={data.node?.template[name].password ?? false}
                 value={data.node?.template[name].value ?? ""}
+                options={globalVariablesEntries}
                 onChange={(value) => {
                   handleOnNewValue(value);
                   if (globalVariablesEntries.includes(value)) {
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 2bea4265f8..8cc423725e 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -28,8 +28,10 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
+import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { codeTabsPropsType } from "../../types/components";
 import {
   convertObjToArray,
@@ -54,8 +56,12 @@ export default function CodeTabsComponent({
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const dark = useDarkStore((state) => state.dark);
   const unselectAll = useFlowStore((state) => state.unselectAll);
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
+  );
 
   const setNodes = useFlowStore((state) => state.setNodes);
+  const setNoticeData = useAlertStore((state) => state.setNoticeData);
 
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
@@ -347,6 +353,9 @@ export default function CodeTabsComponent({
                                                   </div>
                                                 ) : (
                                                   <InputComponent
+                                                    options={
+                                                      globalVariablesEntries
+                                                    }
                                                     editNode={true}
                                                     disabled={false}
                                                     password={
@@ -376,6 +385,16 @@ export default function CodeTabsComponent({
                                                         ].data.node.template[
                                                           templateField
                                                         ].value = target;
+                                                        if (
+                                                          globalVariablesEntries.includes(
+                                                            target
+                                                          )
+                                                        ) {
+                                                          setNoticeData({
+                                                            title: `the value inserted in ${templateField} is a global variable, \n 
+                                                          the real value will be update on run`,
+                                                          });
+                                                        }
                                                         return newInputList;
                                                       });
                                                       tweaks.buildTweakObject!(
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index d0e6b3c770..9dfc96a9ab 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -1,7 +1,6 @@
 import { Listbox, Transition } from "@headlessui/react";
 import * as Form from "@radix-ui/react-form";
 import { Fragment, useEffect, useRef, useState } from "react";
-import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
@@ -27,12 +26,7 @@ export default function InputComponent({
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
-  const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries
-  );
-  const [filteredOpts, setFilteredValue] = useState<string[]>(
-    globalVariablesEntries
-  );
+  const [filteredOpts, setFilteredValue] = useState<string[]>(options);
 
   // Clear component state
   useEffect(() => {
@@ -197,19 +191,21 @@ export default function InputComponent({
         </>
       )}
 
-      <span
-        className={
-          password
-            ? "dropdown-component-arrow  right-8"
-            : "dropdown-component-arrow right-0"
-        }
-      >
-        <IconComponent
-          name="ChevronsUpDown"
-          className="dropdown-component-arrow-color"
-          aria-hidden="true"
-        />
-      </span>
+      {options.length > 0 && (
+        <span
+          className={
+            password
+              ? "dropdown-component-arrow  right-8"
+              : "dropdown-component-arrow right-0"
+          }
+        >
+          <IconComponent
+            name="ChevronsUpDown"
+            className="dropdown-component-arrow-color"
+            aria-hidden="true"
+          />
+        </span>
+      )}
 
       {password && (
         <button
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 817f48ea23..146b2c744b 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -28,7 +28,9 @@ import {
   LANGFLOW_SUPPORTED_TYPES,
   limitScrollFieldsModal,
 } from "../../constants/constants";
+import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { NodeDataType } from "../../types/flow";
 import {
   convertObjToArray,
@@ -59,6 +61,10 @@ const EditNodeModal = forwardRef(
     const setPending = useFlowStore((state) => state.setPending);
     const edges = useFlowStore((state) => state.edges);
     const setNode = useFlowStore((state) => state.setNode);
+    const setNoticeData = useAlertStore((state) => state.setNoticeData);
+    const globalVariablesEntries = useGlobalVariablesStore(
+      (state) => state.globalVariablesEntries
+    );
 
     function changeAdvanced(n) {
       setMyData((old) => {
@@ -245,6 +251,7 @@ const EditNodeModal = forwardRef(
                                       <InputComponent
                                         id={"input-" + index}
                                         editNode={true}
+                                        options={globalVariablesEntries}
                                         disabled={disabled}
                                         password={
                                           myData.node.template[templateParam]
@@ -259,6 +266,27 @@ const EditNodeModal = forwardRef(
                                             value,
                                             templateParam
                                           );
+                                          if (
+                                            globalVariablesEntries.includes(
+                                              value
+                                            )
+                                          ) {
+                                            setNoticeData({
+                                              title: `the value inserted in ${data.node?.display_name} is a global variable, \n 
+                                            the real value will be update on run`,
+                                            });
+                                          }
+                                          //mark as global variable
+                                          setNode(data.id, (oldNode) => {
+                                            let newNode = cloneDeep(oldNode);
+                                            newNode.data = {
+                                              ...newNode.data,
+                                            };
+                                            newNode.data.node.template[
+                                              templateParam
+                                            ].load_from_db = true;
+                                            return newNode;
+                                          });
                                         }}
                                       />
                                     )}

From b76eb655b24b6fce9ffcaf558177225afc9564cb Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 8 Feb 2024 14:01:52 -0300
Subject: [PATCH 19/83] Refactor API functions and update global variables
 types

---
 src/frontend/src/controllers/API/index.ts     | 74 ++++++++-----------
 .../types/zustand/globalVariables/index.ts    |  8 +-
 2 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 970500efe1..7b960547c1 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -851,47 +851,35 @@ export async function requestLogout() {
   }
 }
 
-export async function getGlobalVariables(): Promise<{ [key: string]: string }> {
-  // mocked for now but will eventually be a real API call
-  const globalVariables = window.sessionStorage.getItem("globalVariables");
-  return globalVariables ? JSON.parse(globalVariables) : {};
-}
-
-export async function registerGlobalVariable(name: string, value: string) {
-  // mocked for now but will eventually be a real API call
-  const globalVariables = window.sessionStorage.getItem("globalVariables");
-  const parsedGlobalVariables = globalVariables
-    ? JSON.parse(globalVariables)
-    : {};
-  parsedGlobalVariables[name] = value;
-  window.sessionStorage.setItem(
-    "globalVariables",
-    JSON.stringify(parsedGlobalVariables)
-  );
-}
-
-export async function deleteGlobalVariable(name: string) {
-  // mocked for now but will eventually be a real API call
-  const globalVariables = window.sessionStorage.getItem("globalVariables");
-  const parsedGlobalVariables = globalVariables
-    ? JSON.parse(globalVariables)
-    : {};
-  delete parsedGlobalVariables[name];
-  window.sessionStorage.setItem(
-    "globalVariables",
-    JSON.stringify(parsedGlobalVariables)
-  );
-}
-
-export async function updateGlobalVariable(name: string, value: string) {
-  // mocked for now but will eventually be a real API call
-  const globalVariables = window.sessionStorage.getItem("globalVariables");
-  const parsedGlobalVariables = globalVariables
-    ? JSON.parse(globalVariables)
-    : {};
-  parsedGlobalVariables[name] = value;
-  window.sessionStorage.setItem(
-    "globalVariables",
-    JSON.stringify(parsedGlobalVariables)
-  );
+export async function getGlobalVariables(): Promise<{
+  [key: string]: { id: string; provider: string };
+}> {
+  return (await api.get(`${BASE_URL_API}credentials/`)).data;
+}
+
+export async function registerGlobalVariable(
+  name: string,
+  value: string,
+  provider?: string
+) {
+  return await api.post(`${BASE_URL_API}credentials/`, {
+    name,
+    value,
+    provider,
+  });
+}
+
+export async function deleteGlobalVariable(id: string) {
+  api.delete(`${BASE_URL_API}credentials/${id}`);
+}
+
+export async function updateGlobalVariable(
+  name: string,
+  value: string,
+  id: string
+) {
+  api.patch(`${BASE_URL_API}credentials/${id}`, {
+    name,
+    value,
+  });
 }
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 5e8808d94c..ed81caf1cc 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -1,7 +1,9 @@
 export type GlobalVariablesStore = {
   globalVariablesEntries: Array<string>;
-  globalVariables: { [key: string]: string };
-  setGlobalVariables: (variables: { [key: string]: string }) => void;
-  addGlobalVariable: (key: string, value: string) => void;
+  globalVariables: { [key: string]: { id: string; provider: string } };
+  setGlobalVariables: (variables: {
+    [key: string]: { id: string; provider: string };
+  }) => void;
+  addGlobalVariable: (key: string, value: string, provider?: string) => void;
   removeGlobalVariable: (key: string) => void;
 };

From 9c24affbd12b95a8d450d81ebec35e916dfd8cec Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 8 Feb 2024 14:16:03 -0300
Subject: [PATCH 20/83] Refactor globalVariablesStore to use optional provider

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

diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 8eaaa32827..377cd00f0a 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -11,8 +11,9 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(variables),
       });
     },
-    addGlobalVariable: (key, value) => {
-      const newVariables = { ...get().globalVariables, [key]: value };
+    addGlobalVariable: (key, id, provider) => {
+      const data = { id, provider };
+      const newVariables = { ...get().globalVariables, [key]: data };
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index ed81caf1cc..95c15a3101 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -1,9 +1,9 @@
 export type GlobalVariablesStore = {
   globalVariablesEntries: Array<string>;
-  globalVariables: { [key: string]: { id: string; provider: string } };
+  globalVariables: { [key: string]: { id: string; provider?: string } };
   setGlobalVariables: (variables: {
-    [key: string]: { id: string; provider: string };
+    [key: string]: { id: string; provider?: string };
   }) => void;
-  addGlobalVariable: (key: string, value: string, provider?: string) => void;
+  addGlobalVariable: (key: string, id: string, provider?: string) => void;
   removeGlobalVariable: (key: string) => void;
 };

From 326a0f98660fdeed99afaa692a141225b8e9f9ea Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 8 Feb 2024 15:06:54 -0300
Subject: [PATCH 21/83] Refactor getGlobalVariables function to store data in
 globalVariables object

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

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 7b960547c1..1765098674 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -854,7 +854,14 @@ export async function requestLogout() {
 export async function getGlobalVariables(): Promise<{
   [key: string]: { id: string; provider: string };
 }> {
-  return (await api.get(`${BASE_URL_API}credentials/`)).data;
+  const globalVariables = {};
+  (await api.get(`${BASE_URL_API}credentials/`)).data.forEach((element) => {
+    globalVariables[element.name] = {
+      id: element.id,
+      provider: element.provider,
+    };
+  });
+  return globalVariables;
 }
 
 export async function registerGlobalVariable(

From 021612f5ae304e340256c3aed7587680a737ec45 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 8 Feb 2024 15:29:41 -0300
Subject: [PATCH 22/83] Add provider field to AddNewVariableButton component

---
 .../components/addNewVariableButton.tsx         | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index f30cdbc557..101b60286d 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import InputComponent from "../../../components/inputComponent";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
 import { Label } from "../../../components/ui/label";
@@ -12,15 +13,17 @@ import { useGlobalVariablesStore } from "../../../stores/globalVariables";
 export default function AddNewVariableButton(): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
+  const [provider, setProvider] = useState("");
   const [open, setOpen] = useState(false);
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
   function handleSaveVariable() {
-    registerGlobalVariable(key, value).then((_) => {
-      addGlobalVariable(key, value);
+    registerGlobalVariable(key, value, provider).then((_) => {
+      addGlobalVariable(key, value, provider);
       setKey("");
       setValue("");
+      setProvider("");
       setOpen(false);
     });
   }
@@ -45,6 +48,16 @@ export default function AddNewVariableButton(): JSX.Element {
               }}
               placeholder="example name"
             ></Input>
+            <Label>Provider (optional) </Label>
+            <InputComponent
+              value={provider}
+              onChange={(e) => {
+                setProvider(e);
+              }}
+              password={false}
+              options={["OPENAI_API_KEY", "ANTHROPIC_API_KEY"]}
+              placeholder="example provider"
+            ></InputComponent>
           </div>
           <div className="h-1/2">
             <Label>Variable Value </Label>

From c724d1131a57e1f460b9424aa1b5f7342bd4ce9a Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 8 Feb 2024 15:36:18 -0300
Subject: [PATCH 23/83] Refactor registerGlobalVariable function signature

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

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 1765098674..0340db85ac 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -864,11 +864,15 @@ export async function getGlobalVariables(): Promise<{
   return globalVariables;
 }
 
-export async function registerGlobalVariable(
-  name: string,
-  value: string,
-  provider?: string
-) {
+export async function registerGlobalVariable({
+  name,
+  value,
+  provider,
+}: {
+  name: string;
+  value: string;
+  provider?: string;
+}) {
   return await api.post(`${BASE_URL_API}credentials/`, {
     name,
     value,
diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index 101b60286d..c0a7deba2d 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -19,7 +19,12 @@ export default function AddNewVariableButton(): JSX.Element {
     (state) => state.addGlobalVariable
   );
   function handleSaveVariable() {
-    registerGlobalVariable(key, value, provider).then((_) => {
+    let data: { name: string; value: string; provider?: string } = {
+      name: key,
+      value,
+    };
+    if (provider) data = { ...data, provider };
+    registerGlobalVariable(data).then((_) => {
       addGlobalVariable(key, value, provider);
       setKey("");
       setValue("");

From 928ba602bb942ae6cf0ab9b726e170941cadc7c2 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 8 Feb 2024 16:33:42 -0300
Subject: [PATCH 24/83] Refactor credential creation logic

---
 src/backend/langflow/api/v1/credential.py | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/api/v1/credential.py b/src/backend/langflow/api/v1/credential.py
index 53d5a12152..3b1411cf50 100644
--- a/src/backend/langflow/api/v1/credential.py
+++ b/src/backend/langflow/api/v1/credential.py
@@ -2,12 +2,17 @@
 from uuid import UUID
 
 from fastapi import APIRouter, Depends, HTTPException
+from sqlmodel import Session, select
+
 from langflow.services.auth import utils as auth_utils
 from langflow.services.auth.utils import get_current_active_user
 from langflow.services.database.models.credential import Credential, CredentialCreate, CredentialRead, CredentialUpdate
 from langflow.services.database.models.user.model import User
 from langflow.services.deps import get_session, get_settings_service
-from sqlmodel import Session, select
+                                                          CredentialRead,
+                                                          CredentialUpdate)
+from langflow.services.database.models.user.model import User
+from langflow.services.deps import get_session, get_settings_service
 
 router = APIRouter(prefix="/credentials", tags=["Credentials"])
 
@@ -29,7 +34,10 @@ def create_credential(
         if credential_exists:
             raise HTTPException(status_code=400, detail="Credential name already exists")
 
-        db_credential = Credential.model_validate(credential, from_attributes=True)
+        credential_dict = credential.model_dump()
+        credential_dict["user_id"] = current_user.id
+
+        db_credential = Credential.model_validate(credential_dict)
         if not db_credential.value:
             raise HTTPException(status_code=400, detail="Credential value cannot be empty")
         encrypted = auth_utils.encrypt_api_key(db_credential.value, settings_service=settings_service)

From 3d2a76438c36ff8c683b9c6914b661fa4c5a984f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 8 Feb 2024 16:58:13 -0300
Subject: [PATCH 25/83] fix(parameterComponent): fix logic for setting
 load_from_db property in template object fix(codeTabsComponent): fix logic
 for setting load_from_db property in template object fix(EditNodeModal): fix
 logic for setting load_from_db property in template object
 fix(globalVariablesPage): fix logic for deleting global variable by id
 feat(globalVariables): add getVariableId function to retrieve variable id by
 key feat(types): add getVariableId function to GlobalVariablesStore type

---
 src/backend/langflow/api/v1/credential.py     |   3 -
 .../components/parameterComponent/index.tsx   |  26 +++--
 .../components/codeTabsComponent/index.tsx    |  12 ++
 .../src/modals/EditNodeModal/index.tsx        | 104 ++++++++++--------
 .../src/pages/globalVariablesPage/index.tsx   |  10 +-
 src/frontend/src/stores/globalVariables.ts    |   3 +
 .../types/zustand/globalVariables/index.ts    |   1 +
 7 files changed, 101 insertions(+), 58 deletions(-)

diff --git a/src/backend/langflow/api/v1/credential.py b/src/backend/langflow/api/v1/credential.py
index 3b1411cf50..6d9883ce7c 100644
--- a/src/backend/langflow/api/v1/credential.py
+++ b/src/backend/langflow/api/v1/credential.py
@@ -8,9 +8,6 @@
 from langflow.services.auth.utils import get_current_active_user
 from langflow.services.database.models.credential import Credential, CredentialCreate, CredentialRead, CredentialUpdate
 from langflow.services.database.models.user.model import User
-from langflow.services.deps import get_session, get_settings_service
-                                                          CredentialRead,
-                                                          CredentialUpdate)
 from langflow.services.database.models.user.model import User
 from langflow.services.deps import get_session, get_settings_service
 
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index a32acce576..7b04f6be42 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -421,16 +421,26 @@ export default function ParameterComponent({
                       title: `the value inserted in ${data.node?.display_name} is a global variable, \n 
                     the real value will be update on run`,
                     });
+                    setNode(data.id, (oldNode) => {
+                      let newNode = cloneDeep(oldNode);
+                      newNode.data = {
+                        ...newNode.data,
+                      };
+                      newNode.data.node.template[name].load_from_db = true;
+                      return newNode;
+                    });
+                  }
+                  else{
+                    setNode(data.id, (oldNode) => {
+                      let newNode = cloneDeep(oldNode);
+                      newNode.data = {
+                        ...newNode.data,
+                      };
+                      newNode.data.node.template[name].load_from_db = false;
+                      return newNode;
+                    });
                   }
                   //mark as global variable
-                  setNode(data.id, (oldNode) => {
-                    let newNode = cloneDeep(oldNode);
-                    newNode.data = {
-                      ...newNode.data,
-                    };
-                    newNode.data.node.template[name].load_from_db = true;
-                    return newNode;
-                  });
                 }}
               />
             )}
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 8cc423725e..5e9c3c4869 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -394,6 +394,18 @@ export default function CodeTabsComponent({
                                                             title: `the value inserted in ${templateField} is a global variable, \n 
                                                           the real value will be update on run`,
                                                           });
+                                                          newInputList![
+                                                            i
+                                                          ].data.node.template[
+                                                            templateField
+                                                          ].load_from_db = true;
+                                                        }
+                                                        else{
+                                                          newInputList![
+                                                            i
+                                                          ].data.node.template[
+                                                            templateField
+                                                          ].load_from_db = false;
                                                         }
                                                         return newInputList;
                                                       });
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 146b2c744b..6bbed22fa4 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -163,11 +163,11 @@ const EditNodeModal = forwardRef(
                                 scapedJSONStringfy(
                                   myData.node!.template[templateParam].proxy
                                     ? {
-                                        ...id,
-                                        proxy:
-                                          myData.node?.template[templateParam]
-                                            .proxy,
-                                      }
+                                      ...id,
+                                      proxy:
+                                        myData.node?.template[templateParam]
+                                          .proxy,
+                                    }
                                     : id
                                 )
                             ) ?? false;
@@ -178,7 +178,7 @@ const EditNodeModal = forwardRef(
                                   content={
                                     myData.node?.template[templateParam].proxy
                                       ? myData.node?.template[templateParam]
-                                          .proxy?.id
+                                        .proxy?.id
                                       : null
                                   }
                                 >
@@ -186,16 +186,16 @@ const EditNodeModal = forwardRef(
                                     {myData.node?.template[templateParam]
                                       .display_name
                                       ? myData.node.template[templateParam]
-                                          .display_name
+                                        .display_name
                                       : myData.node?.template[templateParam]
-                                          .name}
+                                        .name}
                                   </span>
                                 </ShadTooltip>
                               </TableCell>
                               <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                                 {myData.node?.template[templateParam].type ===
                                   "str" &&
-                                !myData.node.template[templateParam].options ? (
+                                  !myData.node.template[templateParam].options ? (
                                   <div className="mx-auto">
                                     {myData.node.template[templateParam]
                                       .list ? (
@@ -205,12 +205,12 @@ const EditNodeModal = forwardRef(
                                         value={
                                           !myData.node.template[templateParam]
                                             .value ||
-                                          myData.node.template[templateParam]
-                                            .value === ""
+                                            myData.node.template[templateParam]
+                                              .value === ""
                                             ? [""]
                                             : myData.node.template[
-                                                templateParam
-                                              ].value
+                                              templateParam
+                                            ].value
                                         }
                                         onChange={(value: string[]) => {
                                           handleOnNewValue(
@@ -220,7 +220,7 @@ const EditNodeModal = forwardRef(
                                         }}
                                       />
                                     ) : myData.node.template[templateParam]
-                                        .multiline ? (
+                                      .multiline ? (
                                       <TextAreaComponent
                                         id={
                                           "textarea-edit-" +
@@ -275,24 +275,36 @@ const EditNodeModal = forwardRef(
                                               title: `the value inserted in ${data.node?.display_name} is a global variable, \n 
                                             the real value will be update on run`,
                                             });
+                                            //mark as global variable
+                                            setNode(data.id, (oldNode) => {
+                                              let newNode = cloneDeep(oldNode);
+                                              newNode.data = {
+                                                ...newNode.data,
+                                              };
+                                              newNode.data.node.template[
+                                                templateParam
+                                              ].load_from_db = true;
+                                              return newNode;
+                                            });
+                                          }
+                                          else {
+                                            setNode(data.id, (oldNode) => {
+                                              let newNode = cloneDeep(oldNode);
+                                              newNode.data = {
+                                                ...newNode.data,
+                                              };
+                                              newNode.data.node.template[
+                                                templateParam
+                                              ].load_from_db = false;
+                                              return newNode;
+                                            });
                                           }
-                                          //mark as global variable
-                                          setNode(data.id, (oldNode) => {
-                                            let newNode = cloneDeep(oldNode);
-                                            newNode.data = {
-                                              ...newNode.data,
-                                            };
-                                            newNode.data.node.template[
-                                              templateParam
-                                            ].load_from_db = true;
-                                            return newNode;
-                                          });
                                         }}
                                       />
                                     )}
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "NestedDict" ? (
+                                  .type === "NestedDict" ? (
                                   <div className="  w-full">
                                     <DictComponent
                                       disabled={disabled}
@@ -302,10 +314,10 @@ const EditNodeModal = forwardRef(
                                           templateParam
                                         ]?.value?.toString() === "{}"
                                           ? {
-                                              yourkey: "value",
-                                            }
+                                            yourkey: "value",
+                                          }
                                           : myData.node!.template[templateParam]
-                                              .value
+                                            .value
                                       }
                                       onChange={(newValue) => {
                                         myData.node!.template[
@@ -320,7 +332,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "dict" ? (
+                                  .type === "dict" ? (
                                   <div
                                     className={classNames(
                                       "max-h-48 w-full overflow-auto custom-scroll",
@@ -336,14 +348,14 @@ const EditNodeModal = forwardRef(
                                       value={
                                         myData.node!.template[templateParam]
                                           .value?.length === 0 ||
-                                        !myData.node!.template[templateParam]
-                                          .value
+                                          !myData.node!.template[templateParam]
+                                            .value
                                           ? [{ "": "" }]
                                           : convertObjToArray(
-                                              myData.node!.template[
-                                                templateParam
-                                              ].value
-                                            )
+                                            myData.node!.template[
+                                              templateParam
+                                            ].value
+                                          )
                                       }
                                       duplicateKey={errorDuplicateKey}
                                       onChange={(newValue) => {
@@ -363,7 +375,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "bool" ? (
+                                  .type === "bool" ? (
                                   <div className="ml-auto">
                                     {" "}
                                     <ToggleShadComponent
@@ -383,7 +395,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "float" ? (
+                                  .type === "float" ? (
                                   <div className="mx-auto">
                                     <FloatComponent
                                       disabled={disabled}
@@ -402,7 +414,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "str" &&
+                                  .type === "str" &&
                                   myData.node.template[templateParam]
                                     .options ? (
                                   <div className="mx-auto">
@@ -424,7 +436,7 @@ const EditNodeModal = forwardRef(
                                     ></Dropdown>
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "int" ? (
+                                  .type === "int" ? (
                                   <div className="mx-auto">
                                     <IntComponent
                                       id={"edit-int-input-" + index}
@@ -440,7 +452,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "file" ? (
+                                  .type === "file" ? (
                                   <div className="mx-auto">
                                     <InputFileComponent
                                       editNode={true}
@@ -464,7 +476,7 @@ const EditNodeModal = forwardRef(
                                     ></InputFileComponent>
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "prompt" ? (
+                                  .type === "prompt" ? (
                                   <div className="mx-auto">
                                     <PromptAreaComponent
                                       readonly={
@@ -495,13 +507,13 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "code" ? (
+                                  .type === "code" ? (
                                   <div className="mx-auto">
                                     <CodeAreaComponent
                                       readonly={
                                         myData.node?.flow &&
-                                        myData.node.template[templateParam]
-                                          .dynamic
+                                          myData.node.template[templateParam]
+                                            .dynamic
                                           ? true
                                           : false
                                       }
@@ -526,7 +538,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                    .type === "Any" ? (
+                                  .type === "Any" ? (
                                   "-"
                                 ) : (
                                   <div className="hidden"></div>
diff --git a/src/frontend/src/pages/globalVariablesPage/index.tsx b/src/frontend/src/pages/globalVariablesPage/index.tsx
index 40c2322f73..5a9a6fabf6 100644
--- a/src/frontend/src/pages/globalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/index.tsx
@@ -11,12 +11,20 @@ export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
   );
+  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
   const removeGlobalVariable = useGlobalVariablesStore(
     (state) => state.removeGlobalVariable
   );
 
   function handleDelete(key: string) {
-    deleteGlobalVariable(key).then((_) => removeGlobalVariable(key));
+    const id = getVariableId(key);
+    if(id!==undefined)
+    {
+      deleteGlobalVariable(id).then((_) => removeGlobalVariable(key));
+
+    }else{
+      console.error("id is undefined");
+    }
   }
   return (
     <PageLayout
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 377cd00f0a..5e9adeecbf 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -27,5 +27,8 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(newVariables),
       });
     },
+    getVariableId: (key) => {
+      return get().globalVariables[key]?.id;
+    }
   })
 );
diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 95c15a3101..3e7f01e848 100644
--- a/src/frontend/src/types/zustand/globalVariables/index.ts
+++ b/src/frontend/src/types/zustand/globalVariables/index.ts
@@ -6,4 +6,5 @@ export type GlobalVariablesStore = {
   }) => void;
   addGlobalVariable: (key: string, id: string, provider?: string) => void;
   removeGlobalVariable: (key: string) => void;
+  getVariableId: (key: string) => string | undefined;
 };

From 6b73ad2197f4e284c80468b5b64f9546c059c9c3 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 9 Feb 2024 09:16:45 -0300
Subject: [PATCH 26/83] Fix loading.py to handle custom component keys properly

---
 src/backend/langflow/interface/initialize/loading.py | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/backend/langflow/interface/initialize/loading.py b/src/backend/langflow/interface/initialize/loading.py
index 00fdf07731..40f9f4c3b4 100644
--- a/src/backend/langflow/interface/initialize/loading.py
+++ b/src/backend/langflow/interface/initialize/loading.py
@@ -11,6 +11,9 @@
 from langchain.document_loaders.base import BaseLoader
 from langchain_community.vectorstores import VectorStore
 from langchain_core.documents import Document
+from loguru import logger
+from pydantic import ValidationError
+
 from langflow.interface.custom_lists import CUSTOM_NODES
 from langflow.interface.importing.utils import eval_custom_component_code, get_function, import_by_type
 from langflow.interface.initialize.llm import initialize_vertexai
@@ -22,8 +25,7 @@
 from langflow.interface.utils import load_file_into_dict
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.utils import validate
-from loguru import logger
-from pydantic import ValidationError
+
 
 if TYPE_CHECKING:
     from langflow import CustomComponent
@@ -127,7 +129,8 @@ def update_params_with_load_from_db_fields(custom_component, params, load_from_d
     for field in load_from_db_fields:
         if field in params:
             try:
-                params[field] = custom_component.keys(field)
+                key = custom_component.keys(params[field])
+                params[field] = key if key else params[field]
             except Exception as exc:
                 logger.error(f"Failed to get value for {field} from custom component. Error: {exc}")
                 pass

From 56133bc57ce7eca4f1638ca05d4113bb27f57587 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 9 Feb 2024 09:38:38 -0300
Subject: [PATCH 27/83] Update update_params_with_load_from_db_fields signature
 to include type hint for custom_component

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

diff --git a/src/backend/langflow/interface/initialize/loading.py b/src/backend/langflow/interface/initialize/loading.py
index 40f9f4c3b4..fb986c9a48 100644
--- a/src/backend/langflow/interface/initialize/loading.py
+++ b/src/backend/langflow/interface/initialize/loading.py
@@ -122,7 +122,7 @@ async def instantiate_based_on_type(class_object, base_type, node_type, load_fro
         return class_object(**params)
 
 
-def update_params_with_load_from_db_fields(custom_component, params, load_from_db_fields):
+def update_params_with_load_from_db_fields(custom_component: "CustomComponent", params, load_from_db_fields):
     # For each field in load_from_db_fields, we will check if it's in the params
     # and if it is, we will get the value from the custom_component.keys(name)
     # and update the params with the value

From b57173dd765ecacdde0506bcb2aba27e79e2014a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 9 Feb 2024 09:39:01 -0300
Subject: [PATCH 28/83] Add docs to CustomComponent

---
 .../custom_component/custom_component.py      | 166 ++++++++++++++++--
 1 file changed, 152 insertions(+), 14 deletions(-)

diff --git a/src/backend/langflow/interface/custom/custom_component/custom_component.py b/src/backend/langflow/interface/custom/custom_component/custom_component.py
index 15e7cd8458..ac53b05058 100644
--- a/src/backend/langflow/interface/custom/custom_component/custom_component.py
+++ b/src/backend/langflow/interface/custom/custom_component/custom_component.py
@@ -1,6 +1,5 @@
 import operator
-from typing import Any, Callable, ClassVar, List, Optional, Union
-from uuid import UUID
+from typing import Any, Callable, List, Optional, Union
 
 import yaml
 from cachetools import TTLCache, cachedmethod
@@ -19,23 +18,40 @@
 
 
 class CustomComponent(Component):
-    display_name: Optional[str] = None
-    description: Optional[str] = None
-    code: Optional[str] = None
-    field_config: dict = {}
-    code_class_base_inheritance: ClassVar[str] = "CustomComponent"
-    function_entrypoint_name: ClassVar[str] = "build"
-    function: Optional[Callable] = None
-    repr_value: Optional[Any] = ""
-    user_id: Optional[Union[UUID, str]] = None
-    status: Optional[Any] = None
-    _tree: Optional[dict] = None
+    """
+    Represents a custom component in Langflow.
+
+    Attributes:
+        display_name (Optional[str]): The display name of the custom component.
+        description (Optional[str]): The description of the custom component.
+        code (Optional[str]): The code of the custom component.
+        field_config (dict): The field configuration of the custom component.
+        code_class_base_inheritance (ClassVar[str]): The base class name for the custom component.
+        function_entrypoint_name (ClassVar[str]): The name of the function entrypoint for the custom component.
+        function (Optional[Callable]): The function associated with the custom component.
+        repr_value (Optional[Any]): The representation value of the custom component.
+        user_id (Optional[Union[UUID, str]]): The user ID associated with the custom component.
+        status (Optional[Any]): The status of the custom component.
+        _tree (Optional[dict]): The code tree of the custom component.
+    """
 
     def __init__(self, **data):
+        """
+        Initializes a new instance of the CustomComponent class.
+
+        Args:
+            **data: Additional keyword arguments to initialize the custom component.
+        """
         self.cache = TTLCache(maxsize=1024, ttl=60)
         super().__init__(**data)
 
     def custom_repr(self):
+        """
+        Returns the custom representation of the custom component.
+
+        Returns:
+            str: The custom representation of the custom component.
+        """
         if self.repr_value == "":
             self.repr_value = self.status
         if isinstance(self.repr_value, dict):
@@ -45,14 +61,32 @@ def custom_repr(self):
         return str(self.repr_value)
 
     def build_config(self):
+        """
+        Builds the configuration for the custom component.
+
+        Returns:
+            dict: The configuration for the custom component.
+        """
         return self.field_config
 
     @property
     def tree(self):
+        """
+        Gets the code tree of the custom component.
+
+        Returns:
+            dict: The code tree of the custom component.
+        """
         return self.get_code_tree(self.code or "")
 
     @property
     def get_function_entrypoint_args(self) -> list:
+        """
+        Gets the arguments of the function entrypoint for the custom component.
+
+        Returns:
+            list: The arguments of the function entrypoint.
+        """
         build_method = self.get_build_method()
         if not build_method:
             return []
@@ -76,6 +110,12 @@ def get_function_entrypoint_args(self) -> list:
 
     @cachedmethod(operator.attrgetter("cache"))
     def get_build_method(self):
+        """
+        Gets the build method for the custom component.
+
+        Returns:
+            dict: The build method for the custom component.
+        """
         if not self.code:
             return {}
 
@@ -93,6 +133,12 @@ def get_build_method(self):
 
     @property
     def get_function_entrypoint_return_type(self) -> List[Any]:
+        """
+        Gets the return type of the function entrypoint for the custom component.
+
+        Returns:
+            List[Any]: The return type of the function entrypoint.
+        """
         build_method = self.get_build_method()
         if not build_method or not build_method.get("has_return"):
             return []
@@ -111,6 +157,12 @@ def get_function_entrypoint_return_type(self) -> List[Any]:
 
     @property
     def get_main_class_name(self):
+        """
+        Gets the main class name of the custom component.
+
+        Returns:
+            str: The main class name of the custom component.
+        """
         if not self.code:
             return ""
 
@@ -129,9 +181,21 @@ def get_main_class_name(self):
 
     @property
     def template_config(self):
+        """
+        Gets the template configuration for the custom component.
+
+        Returns:
+            dict: The template configuration for the custom component.
+        """
         return self.build_template_config()
 
     def build_template_config(self):
+        """
+        Builds the template configuration for the custom component.
+
+        Returns:
+            dict: The template configuration for the custom component.
+        """
         if not self.code:
             return {}
 
@@ -147,6 +211,16 @@ def build_template_config(self):
 
     @property
     def keys(self):
+        """
+        Returns the credential for the current user with the specified name.
+
+        Raises:
+            ValueError: If the user id is not set.
+
+        Returns:
+            The credential for the current user with the specified name.
+        """
+
         def get_credential(name: str):
             if hasattr(self, "_user_id") and not self._user_id:
                 raise ValueError(f"User id is not set for {self.__class__.__name__}")
@@ -159,6 +233,15 @@ def get_credential(name: str):
         return get_credential
 
     def list_key_names(self):
+        """
+        Lists the names of the credentials for the current user.
+
+        Raises:
+            ValueError: If the user id is not set.
+
+        Returns:
+            List[str]: The names of the credentials for the current user.
+        """
         if hasattr(self, "_user_id") and not self._user_id:
             raise ValueError(f"User id is not set for {self.__class__.__name__}")
         credential_service = get_credential_service()
@@ -167,7 +250,15 @@ def list_key_names(self):
             return credential_service.list_credentials(user_id=self._user_id, session=session)
 
     def index(self, value: int = 0):
-        """Returns a function that returns the value at the given index in the iterable."""
+        """
+        Returns a function that returns the value at the given index in the iterable.
+
+        Args:
+            value (int): The index value.
+
+        Returns:
+            Callable: A function that returns the value at the given index.
+        """
 
         def get_index(iterable: List[Any]):
             return iterable[value] if iterable else iterable
@@ -176,9 +267,25 @@ def get_index(iterable: List[Any]):
 
     @property
     def get_function(self):
+        """
+        Gets the function associated with the custom component.
+
+        Returns:
+            Callable: The function associated with the custom component.
+        """
         return validate.create_function(self.code, self.function_entrypoint_name)
 
     async def load_flow(self, flow_id: str, tweaks: Optional[dict] = None) -> Any:
+        """
+        Loads a flow with the specified ID and applies tweaks if provided.
+
+        Args:
+            flow_id (str): The ID of the flow to load.
+            tweaks (Optional[dict]): The tweaks to apply to the flow.
+
+        Returns:
+            Any: The loaded flow.
+        """
         from langflow.processing.process import build_sorted_vertices, process_tweaks
 
         db_service = get_db_service()
@@ -191,6 +298,15 @@ async def load_flow(self, flow_id: str, tweaks: Optional[dict] = None) -> Any:
         return await build_sorted_vertices(graph_data, self.user_id)
 
     def list_flows(self, *, get_session: Optional[Callable] = None) -> List[Flow]:
+        """
+        Lists the flows associated with the custom component.
+
+        Args:
+            get_session (Optional[Callable]): The function to get the session.
+
+        Returns:
+            List[Flow]: The list of flows associated with the custom component.
+        """
         if not self._user_id:
             raise ValueError("Session is invalid")
         try:
@@ -210,6 +326,18 @@ async def get_flow(
         tweaks: Optional[dict] = None,
         get_session: Optional[Callable] = None,
     ) -> Flow:
+        """
+        Gets a flow with the specified name or ID and applies tweaks if provided.
+
+        Args:
+            flow_name (Optional[str]): The name of the flow to get.
+            flow_id (Optional[str]): The ID of the flow to get.
+            tweaks (Optional[dict]): The tweaks to apply to the flow.
+            get_session (Optional[Callable]): The function to get the session.
+
+        Returns:
+            Flow: The flow with the specified name or ID.
+        """
         get_session = get_session or session_getter
         db_service = get_db_service()
         with get_session(db_service) as session:
@@ -225,4 +353,14 @@ async def get_flow(
         return await self.load_flow(flow.id, tweaks)
 
     def build(self, *args: Any, **kwargs: Any) -> Any:
+        """
+        Builds the custom component.
+
+        Args:
+            *args: The positional arguments.
+            **kwargs: The keyword arguments.
+
+        Returns:
+            Any: The result of the build process.
+        """
         raise NotImplementedError

From 06f0e0e0f89bc5b5c33bbd23320843bda0b41af7 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 18 Mar 2024 13:12:31 +0100
Subject: [PATCH 29/83] Added dropdown and global page

---
 langflow1.db                                  | Bin 0 -> 90112 bytes
 src/backend/langflow/services/chat/utils.py   |  15 --
 src/backend/langflow/utils/chat.py            |  34 ---
 src/backend/langflow/utils/prompt.py          |  58 ------
 .../components/parameterComponent/index.tsx   |   8 +-
 .../src/components/inputComponent/index.tsx   | 197 ++++++++++--------
 .../components/addNewVariableButton.tsx       |  19 +-
 src/frontend/src/utils/styleUtils.ts          |   2 +
 8 files changed, 118 insertions(+), 215 deletions(-)
 create mode 100644 langflow1.db
 delete mode 100644 src/backend/langflow/utils/chat.py
 delete mode 100644 src/backend/langflow/utils/prompt.py

diff --git a/langflow1.db b/langflow1.db
new file mode 100644
index 0000000000000000000000000000000000000000..2b39da5dd15e9197718ae2575b99af51f65a1115
GIT binary patch
literal 90112
zcmeI5-EZ4icEF{0#*XvlnYI}tXcuL?GuU`DmPwJKBp2yccI3o~Ej#{-JxRd5BCjOI
z6e*LGZ6zHn63n9S`@H`}Q55JO(E@$#00sKCZ$+^M`q*>%VUe;Fe}rCmoFhoKNM2r^
z^SkHXd+vvQ)}AfuF6C;L-6Sq2roKp})2YAXxKt{AH<e0#1)slw&lULGfX`>}318{(
z%i!OTN5=e@n`8f%`f_9>b&HPu+pQZn{^90--k7}p@7I60#$R8)`d`;ZuKxb&(#Zde
zjEwx_;GFOZ5<mh-00|(0b0F|;@{5u2`}foDM_p1iC^2ZWs;kN#wH@6udk(*xTP>H?
z%iMZtcCpO$T;%Ru8x3w#%yyI8EUnHxF0I}Zvy)t9d7Z0lEG~Y_T^pTSuB@%EmKG}O
zy*VhY9hF;IU05ouZgWq|+uXfKev{WGAAC7H{_K7_rJEW(aCQyozZKGUE$>+A5l0bv
zPW;*S*zmY`JKgb;>jz5Bu=W*=I;yR=Tu_!Be-UW7P<dG1;`$`wmMa`f$lZ(FIk|Le
zc>MnDv>wa4?ND3MHI{m;Z?-{#ZkEA`$%i+G$G^Fqeih5kBu&cly45!?cD0)kJDPky
zaeZX`_U-f!zwnBd-OD~VVui@gu#)rc4~i^SToE<HB4wqhJBn&GTb4;pmz!N)UM!a?
z?0mbW5tnKT_*4(URMr=k%ItK_GBj$(GSIlb<^i`8?#bG+pPP^HFeS?>W+1vY$<A$5
z7M^XCxqHFk{PJpf;ZcRz(7li;w_2Vrua+xw<u#6-^Aca1{Kbvo@xQq}$fg(_MPNT~
zzW=Myk@35C(?1M(G*z2wpt??s?zd|(vfcB&e3`_1#AwqfkCtui=_h0aS@%MYmDzwo
z2<@#e_kLJU!BM<6JpSnJAdX!YiqQRjeevq>_~e~54egw?^c~t!m@WEWM|*8Ol7d;g
zf5_eQ?0sWoczpU!dbcOHKx;qg)d3lXXd-zArzT$xd)fY`CtJu*0b%`YM}lkvJ3MSX
z{HsckHY#y&YV!TYXCvcx?xcVFx!?YJ1pM1RkC~HyuAeC#XAK5%Tm`f_QYl@_B?i0V
zaL^i;AC*^QRs>a?sII<8!}=Y+I-vfBy7p^JLdqvLz_Zuu`=1Yw|LV>ld-P#K7vbR^
zem*ojK6N|&HY{RKPWFS@75n|!fbxwcWW~!)a9*3^ndJL=+G~P;D|n^LuCmXSSjqbL
zK$ALvD7(&b3tNj=F|>%|>|3_h|DtWxbb~5-lhhAyXRXgMMe8U|yXA}8x9ok3i?;DG
znff$8vFn~e8dhC5qggPy9M`g;Pxq@<s1m!-uXTzT2eji?KGcpggo?m^4uKDKmHAOO
z;gcTwRSMqtLIOwt2_OL^fCP{L5<mh-00|%gB!C3^6L|Nx=^INwd-r*2bhK0|rBovG
z8ZS~w5U5nm7DzQmh#(efnk>_rS~G}QXVa)(XRBWe*{|!GJzvO+k5y?iGh0*3dR?wm
zGDT;z(b`&=eodZ|OlQ8iOAihf=j~Nhl!f`HYgs-kP4VKCP~Ze%Mv!NCJ|l~KkuS!t
zNW~eUn8^u6IhXH$MamU(*FdlI*pDfA;|mEO0VIF~kN^@u0!RP}AOR$R1dsp{_z4pD
z`OwnnaWfMB`2UZou|NI<6-1Gd01`j~NB{{S0VIF~kN^@u0!RP}Ac27dt`GfeG~9{6
z_W#2l{o@M>AOR$R1dsp{Kmter2_OL^fCP{L61c<!*!n+?|1WU?qiRS12_OL^fCP{L
z5<mh-00|%gB!C2f0FM9B43Gd4Kmter2_OL^fCP{L5<mh-00~@v0yzG^{AG+9A^{|T
z1dsp{Kmter2_OL^fCP{L62S34+5i$j0!RP}AOR$R1dsp{Kmter2_S*XPk{aZzoDDI
zNsZmTwF<xRg#?fQ5<mh-00|%gB!C2v01`j~=R@G#%FyUvzgtf&l~PMCb^Lc7Ldlm(
zv&Ph%UCysP+o`vj+NSjA&5lfFA8!||PJ52*ZglK}wXCpMt8cyD)3(ZwU$@J1%RBq_
z&g;F-v&xpT{QSvUo|cPq{Q8^ir&ivrEIw;@TKac8oBIzQ<ONMG@|u?8X+bI$_(E3X
zi6)40mCqMzH7y=7J}1nG*$mHTA=Pma<=!n`86A(R)K$lFHk{qEv-+fzZEP-3so8q8
zMs;^@^XbOI)XKJ1S=id8>y?darM0;zuPpJkgVMvSBt3TJ*N-Y2?b0)YR_Q|9C`{G0
zC1T_XZ|1+-+OI!&pz@kZ)f$y^lt_}8CAC~tQmbmMDocfeMB?g5#TlN@2%vLOJXW2T
z>CwM@w?4^Ah_rNWhjzLORo1JU#^UB;@loSpGnY4>sI{rq;&(N5hb%N&vrDzMFuV7>
zC{3x_!t+PVa;YwC<(?e4yK?=>yg2`Scd7VLec0LDntQbAwzs$JM(*{LYn2{6SY9bt
zN()M9WkGpb-iETt3e{|0EJ%4t5QU;F)KsaM7iE#BRL#fL6N)oZK9iM&T&{4OdTjlF
zXzX{Xu^-2NH}=oxW8|1C5<mh-00|%gB!C2v01`j~NB{{S0VL2%;On8K^l`H@LoCs8
za~@ZIKD0D?+{^)6|4*m?HwABeeJTY0<L}egMg1zwXubQV;?gSJqc$~NZb`S_kevoG
z^|D#lO$ui<u4dU>`9P(HK~0r@%gwfR!}ZS2wjD_1IGO0|Q+7sxx15m+c|OOBk_1*-
zlZ3oTBv~efnygVOR`Xd^BSgx*oiHtpIukS8i?<WH2EQlf8pK_(t!B$zr_Gi@Tsrl-
zy|1bh-*OXfr$t$sIyI@Ss};DHoo-o<?&_8am)=esz)vwNWnivM&hmw#B*U~BB<jHV
z9G}m~f*=d|yewr!F)x1)S2W@h@76H;qav`UFiHJnfn44}69AC9r^4Gq`DTejm;4KH
zRaibY-EHeY7H)U#HV~ZvEmhjE42{}wa)Ko?bjR%`a2nQr_o&%6T-^ZlaH>WOhh<UI
z4Z03=Je03kp2TtXEt@?hOk<L!NAFN%NJg|h0>v6lrgb2pu6CcNn>7oLe7P*5DK#h_
zMXQEcGlo{%ZM9vcMQq1YBF<vjySn0EgwzoPp>Ts4ged|D;o-+ph)bLx3f*KRm@Tow
z=z`F6)$J+&P?tZs@=+NRSACDzI;k2x>N~F8qx~tZKZNzM1@G(L6*58ngBsQ?^P@_K
zTKvh2+><RqU7@PGIx&<k$ct+1M<q=V!yYko=s>9AMtg;@C#hPN(PQ<A8UQ@Keb#Q^
zsN@M^@!CJuY4qt!y*`&Zs;#$zUVEa%wY)B$3n_XIh6=6#*Mx4@a59Wy6}nYLHK1qn
z`?(3$&-Qr$BxP5QcD;Slvc6K&9jJ~SCF~&kBx9*8wcP|aiG)HoT({-SOi#BuZo@J&
zETT3@teY9tYEDCHXBuR0Lp#WRQ$x`$|BEvX$=qq^(-qg6_7!)Sernrsp=Yh>)X==X
zBhs^m{mBa^u$Mvs&#XyYm)eJEtJL#kJQHL09^+B5Bn~yG>c$*^eO+@KP<F7`2niZg
zuQ!-4l9fcbA?l{}b#bQl)u-z+Qzxth$9iiLti|%MmMP~1F~{?vw<d~WCeLSuY`!4N
zQm!cHn81C#wZ4)t8TvbIMAJNn5t^@^ePY)yZbyAoQcx=5v;}?WnS3_i@?t(pa0;Fg
zanX+Lr^6;~u$vlW5jIy7FU@VM%@Lb&glkZvRcjj@RBLd035-KrR_|S6>^PiCoHj9x
z4o9lsuyKZ7qnvJXo=FiS6V0b?SsEmOJrpoF;E1Vl9e9RHOfRb-17bpD)y+EG$;{(4
zZgZDSgny{|nF_$Rj9^3&jBAd%3kk3fMLeo240r#Wt^cRTeuVY^Pi63ndLjWNfCP{L
z5<mh-00|%gB!C2v01~)d1ibbCV^(1O@&6xEV}H0@x}!Eo00|%gB!C2v01`j~NB{{S
z0VIF~K1l*!4T+<Dc6#Ib|0ih;s5BBl0!RP}AOR$R1dsp{Kmter30xuqZ2kWv|Nk#N
z_OB^;;|mEO0VIF~kN^@u0!RP}AOR$R1dsp{_(>2DhV;?X{qHvK|No8scM9J4LIOwt
z2_OL^fCP{L5<mh-00|%gB!C1i34vSbE8kSrY>gLGiKi0r_y6Pg|B@6hs(}QM01`j~
zNB{{S0VIF~kN^@u0!Y9kFgEnfXmtD!C%+mTD$I*e5RW(!h7&kb#DiE^nEpXKyci$x
z=rAlE3l~H!>kSk$I55nbYeS%i{tp3_J{Y5oJ+c3tui(~x@nZU?W{DFB8xzEc31Y<@
zh8lvvGEQCbFLqC!b0nF*iUvVnSlOLCpp2Lo7$2L|A=qFY;*fZz1$jhc%q+L4Sz4Hy
zU6_Bqf102&g`Awp7xEB<P!@}YqRbxUhX5>Q#A2?%3pt^X&1ZSZGq`>s0R2Y~jv}K%
zV3I0PcjD1w4#NN`s%6v6VWJF+UX<}776tb`h8QIVM9TxoBGFdD`ZYK}SP&B=;dpq5
zf--qN7~v$8@FZ~oiPJGvh}on=;G|fjnUdK#wc_D}6V^N?W0K0NL~X<ayqtGDu%j_v
z2Dk0LbcyPFp^G^%!Xy>eXpKNHPNhK!#O{o@0~aaWW3Qa&!C<#dZPvhcgCAZ*0=|?<
z>d&IUUGN4jDq@nVH_3rwQ*g6-LVfDc*28m7)v2ALZ4aY}W#Jj8Y4D=rCXK<hcBmO|
z01}`O^z^5VcpBUmhBIV(2l6GVHUt|y5{&O6)%j*9V4_-kp&ZXCYTy~mJFGj01s;_#
zu6*!>?%*xF_ax4oAI36xO1GUq8nrIW^rSxQ2lNgr`$WCvPDxXOz{^uDo9^k<8xEYL
z{##y{QC2x$49LaLdrx;Dh<G%2?>uYD`~+flCp-`{xhc18SFIx_rUZFsf{ha6rQsdL
z%Oa$7w!-kEorf_t&)nDq(;{j3eLEb2MTEx*fZi~&tY~oppx%Q8Cjbt^-Qom5*p9H7
zmDu1qIy%4!0Nsv-T^`(7h8;!1^By<>5E?3L(mT*Y>uTi8Nj#$7fpyftFOn<VD<`X%
z+8#00m<4_u1DpW3urr)E0l=nVCvXCQjaCw?_=n@`i`wcP3Ye(Y(ZO}nntxy*e3FrF
ze8?G0QpA<V34ngn2%qi*02}{PFp(4Zmf=(kTS`5RHJXXGI)ROU-1O5qdDMwd@>sC?
zO>~8{bcHP+LnoG~-U&4~y;6dG^v;m@Yw28RWr1T$;HS2Tm*#qda*P4DvAW1vHO__O
zZmt>bp}!XAaIVEMf5(}bo(66iU$~5FHK+H4%uDm7xox#Mm6)8`AZDFHM!I)X8}haw
zSDQ)caE87^xhJ|w*j|utxkU>W$V&?xtl4ubHf=&qObNpxno_f^rlM8Du>%|SMv&~#
z__Ekprb~P5^#kP=R?-P3-G^#vkVn{M^a%XnB76!eL5jpYiQwUuT_>jghPW^do3yEi
z1W&t`65iLtDJJS*Sj$n3&Vd;0{W(b7x<Zu`LgmXin9+)-Ly~aV!XtHD#nqeCYR5-q
zHK?)Yx;puxIv0`+jj31Avp}#}BevF}Z0h3eL{n!qXNq;vFxr8y?3?4#7JTJ10&AKE
zHCfOuQJ4bpc4BpVne*PU61G<%n$zIxN_-Y@gE+XP9$&~kOM@M>t|#!SPNT3VTB5qr
zW{cVcR<h#0MIyE21iciW$%8tlLJ*PoEF==EF0Q`gEvhRCu8M}0AZfGdBkEb$4XQDF
z6c$2zywi)^ZiMnC$so3~dD+{vI>B07Exwic#V;RHSiV+?OSNCV;<#V?Nq^0Gdz=ko
zgG0&|klF;kc$VcbceMX5XLe8UD0mX{s~3Y?m)Il)bJ5sImMnH+adF98q3(6k<M}1A
zaoN{kS_KKFVTqd7p{)Vu&YAW-J|>~sc3g0uYdSSFuif?B=eFBwLkHezd0UHKyn=*Y
z3Z-V*P2#%2ZabE?3fnxOck}8FJJvNgn&|2h>>Xy8B72jA#%W*I+y<l<3ldy!P`%z@
z{(_ui?Naa7WH{Bb9Gz)Usydd@cKue9^|PngZ~Q&ehHCY$YHT+{%d&k>h2;kO9I~)a
zSt^KGDVK#;k!^Njo*vr)A!G`2p;+XFyvP@rpl>Xz3D<;-3_F{}ViA(dvdD|#_un7)
z|Nq(eA96TBixc+LIQ)0^Et?rx*j$J1oc9}GCOs~~;Xe-loya8J2^=dN{u3jLEUc;t
zjcIZC51Z*&H`W^b_XU0z&;C3KrYIn3ueafQE-;xETu-dk>>X7{CruL>*d%34y@H;l
z>qu-o(;ZAld0k{TzAN!rzzrJA;P4+@ZGiL9lVm68rEvJqc^$Q(JIwbF+m#bI<ENT3
z!QsE>3WRPt4*zlZf5C_UQeMi)yd(-Rp!fb*S%xmo8~*3`LPpL?VzyYw<=~H)`5at1
X9RKrzoX<;g9xe;;H_y`X<NyB$|7<os

literal 0
HcmV?d00001

diff --git a/src/backend/langflow/services/chat/utils.py b/src/backend/langflow/services/chat/utils.py
index 85e6cdcd59..271c0e85be 100644
--- a/src/backend/langflow/services/chat/utils.py
+++ b/src/backend/langflow/services/chat/utils.py
@@ -8,7 +8,6 @@
 from langflow.api.v1.schemas import ChatMessage
 from langflow.interface.utils import try_setting_streaming_options
 from langflow.processing.base import get_result_and_steps
-from langflow.utils.chat import ChatDefinition
 
 LANGCHAIN_RUNNABLES = (Chain, Runnable, AgentExecutor)
 
@@ -40,20 +39,6 @@ async def process_graph(
                 client_id=client_id,
                 session_id=session_id,
             )
-        elif isinstance(build_result, ChatDefinition):
-            raw_output = await run_build_result(
-                build_result,
-                chat_inputs,
-                client_id=client_id,
-                session_id=session_id,
-            )
-            if isinstance(raw_output, dict):
-                if not build_result.output_key:
-                    raise ValueError("No output key provided to ChatDefinition when returning a dict.")
-                result = raw_output[build_result.output_key]
-            else:
-                result = raw_output
-            intermediate_steps = []
         else:
             raise TypeError(f"Unknown type {type(build_result)}")
         logger.debug("Generated result and intermediate_steps")
diff --git a/src/backend/langflow/utils/chat.py b/src/backend/langflow/utils/chat.py
deleted file mode 100644
index e1621bdabe..0000000000
--- a/src/backend/langflow/utils/chat.py
+++ /dev/null
@@ -1,34 +0,0 @@
-from typing import Any, Callable, Optional, Union
-
-from langchain_core.prompts import PromptTemplate as LCPromptTemplate
-from langflow.utils.prompt import GenericPromptTemplate
-from llama_index.prompts import PromptTemplate as LIPromptTemplate
-
-PromptTemplate = Union[LCPromptTemplate, LIPromptTemplate]
-
-
-class ChatDefinition:
-    def __init__(
-        self,
-        func: Callable,
-        inputs: list[str],
-        output_key: Optional[str] = None,
-        prompt_template: Optional[PromptTemplate] = None,
-    ):
-        self.func = func
-        self.input_keys = inputs
-        self.output_key = output_key
-        self.prompt_template = prompt_template
-
-    @classmethod
-    def from_prompt_template(cls, prompt_template: PromptTemplate, func: Callable, output_key: Optional[str] = None):
-        prompt = GenericPromptTemplate(prompt_template)
-        return cls(
-            func=func,
-            inputs=prompt.input_keys,
-            output_key=output_key,
-            prompt_template=prompt_template,
-        )
-
-    def __call__(self, inputs: dict, callbacks: Optional[Any] = None) -> dict:
-        return self.func(inputs, callbacks)
diff --git a/src/backend/langflow/utils/prompt.py b/src/backend/langflow/utils/prompt.py
deleted file mode 100644
index 871193f45a..0000000000
--- a/src/backend/langflow/utils/prompt.py
+++ /dev/null
@@ -1,58 +0,0 @@
-from typing import Any, Union
-
-from langchain_core.prompts import PromptTemplate as LCPromptTemplate
-from llama_index.prompts import PromptTemplate as LIPromptTemplate
-
-PromptTemplateTypes = Union[LCPromptTemplate, LIPromptTemplate]
-
-
-class GenericPromptTemplate:
-    def __init__(self, prompt_template: PromptTemplateTypes):
-        object.__setattr__(self, "prompt_template", prompt_template)
-
-    @property
-    def input_keys(self):
-        prompt_template = object.__getattribute__(self, "prompt_template")
-        if isinstance(prompt_template, LCPromptTemplate):
-            return prompt_template.input_variables
-        elif isinstance(prompt_template, LIPromptTemplate):
-            return prompt_template.template_vars
-        else:
-            raise TypeError(f"Unknown prompt template type {type(prompt_template)}")
-
-    def to_lc_prompt(self):
-        prompt_template = object.__getattribute__(self, "prompt_template")
-        if isinstance(prompt_template, LCPromptTemplate):
-            return prompt_template
-        elif isinstance(prompt_template, LIPromptTemplate):
-            return LCPromptTemplate.from_template(prompt_template.get_template())
-        else:
-            raise TypeError(f"Unknown prompt template type {type(prompt_template)}")
-
-    def to_li_prompt(self):
-        prompt_template = object.__getattribute__(self, "prompt_template")
-        if isinstance(prompt_template, LIPromptTemplate):
-            return prompt_template
-        elif isinstance(prompt_template, LCPromptTemplate):
-            return LIPromptTemplate(template=prompt_template.template)
-        else:
-            raise TypeError(f"Unknown prompt template type {type(prompt_template)}")
-
-    def __or__(self, other):
-        prompt_template = object.__getattribute__(self, "prompt_template")
-        if isinstance(prompt_template, LIPromptTemplate):
-            return self.to_lc_prompt() | other
-        else:
-            raise TypeError(f"Unknown prompt template type {type(other)}")
-
-    def __getattribute__(self, name: str) -> Any:
-        if name in {
-            "input_keys",
-            "to_lc_prompt",
-            "to_li_prompt",
-            "__or__",
-            "prompt_template",
-        }:
-            return object.__getattribute__(self, name)
-        prompt_template = object.__getattribute__(self, "prompt_template")
-        return getattr(prompt_template, name)
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 7b04f6be42..9278f2b23d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -314,9 +314,8 @@ export default function ParameterComponent({
       <>
         <div
           className={
-            "w-full truncate text-sm" +
-            (left ? "" : " text-end") +
-            (info !== "" ? " flex items-center" : "")
+            "w-full truncate text-sm flex items-center" +
+            (left ? "" : " text-end")
           }
         >
           {proxy ? (
@@ -429,8 +428,7 @@ export default function ParameterComponent({
                       newNode.data.node.template[name].load_from_db = true;
                       return newNode;
                     });
-                  }
-                  else{
+                  } else {
                     setNode(data.id, (oldNode) => {
                       let newNode = cloneDeep(oldNode);
                       newNode.data = {
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 9dfc96a9ab..cd2846cdbe 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -1,11 +1,13 @@
 import { Listbox, Transition } from "@headlessui/react";
 import * as Form from "@radix-ui/react-form";
 import { Fragment, useEffect, useRef, useState } from "react";
+import AddNewVariableButton from "../../pages/globalVariablesPage/components/addNewVariableButton";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
-import { classNames } from "../../utils/utils";
+import { classNames, cn } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
+import { Separator } from "../ui/separator";
 
 export default function InputComponent({
   autoFocus = false,
@@ -26,7 +28,6 @@ export default function InputComponent({
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
-  const [filteredOpts, setFilteredValue] = useState<string[]>(options);
 
   // Clear component state
   useEffect(() => {
@@ -35,13 +36,12 @@ export default function InputComponent({
     }
   }, [disabled]);
 
-  const filteredOptions = filteredOpts.filter((option) =>
+  const filteredOptions = options.filter((option) =>
     option.toLowerCase().includes(value.toLowerCase())
   );
 
   function onInputLostFocus(event): void {
     if (onBlur) onBlur(event);
-    setShowOptions(false);
   }
 
   return (
@@ -107,103 +107,115 @@ export default function InputComponent({
               handleKeyDown(e, value, "");
               if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
             }}
-            onFocus={() => setShowOptions(true)}
           />
-          {
-            /* options.length > 0 && filteredOptions.length > 0 */ true ? (
-              <Listbox
-                onChange={(val) => {
-                  onChange(val);
-                }}
-              >
-                <>
-                  <div className={"relative mt-1 "}>
-                    <Transition
-                      show={showOptions}
-                      as={Fragment}
-                      leave="transition ease-in duration-100"
-                      leaveFrom="opacity-100"
-                      leaveTo="opacity-0"
-                    >
-                      <Listbox.Options
-                        className={classNames(
-                          editNode
-                            ? "dropdown-component-true-options nowheel custom-scroll"
-                            : "dropdown-component-false-options nowheel custom-scroll",
-                          false ? "mb-2 w-[250px]" : "absolute w-full"
-                        )}
+          <Listbox
+            onChange={(val) => {
+              onChange(val);
+            }}
+          >
+            <>
+              <div className={"relative mt-1 "}>
+                <Transition
+                  show={showOptions}
+                  as={Fragment}
+                  leave="transition ease-in duration-100"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0"
+                >
+                  <Listbox.Options
+                    className={classNames(
+                      editNode
+                        ? "dropdown-component-true-options nowheel custom-scroll"
+                        : "dropdown-component-false-options nowheel custom-scroll",
+                      false ? "mb-2 w-[250px]" : "absolute w-full"
+                    )}
+                  >
+                    <div className="flex items-center justify-between px-4 pb-3 pt-2 font-semibold">
+                      <div className="flex items-center gap-2">
+                        <IconComponent name="Globe" className="h-4 w-4" />
+                        Global Variables
+                      </div>
+                      <div>
+                        <AddNewVariableButton>
+                          <button className="text-muted-foreground hover:text-accent-foreground">
+                            <IconComponent name="Plus" className="h-5 w-5" />
+                          </button>
+                        </AddNewVariableButton>
+                      </div>
+                    </div>
+                    <Separator />
+                    {filteredOptions.map((option, id) => (
+                      <Listbox.Option
+                        key={id}
+                        className={({ active }) =>
+                          classNames(
+                            active ? " bg-accent" : "",
+                            editNode
+                              ? "dropdown-component-false-option"
+                              : "dropdown-component-true-option",
+                            " hover:bg-accent"
+                          )
+                        }
+                        value={option}
                       >
-                        {filteredOptions.map((option, id) => (
-                          <Listbox.Option
-                            key={id}
-                            className={({ active }) =>
-                              classNames(
-                                active ? " bg-accent" : "",
-                                editNode
-                                  ? "dropdown-component-false-option"
-                                  : "dropdown-component-true-option",
-                                " hover:bg-accent"
-                              )
-                            }
-                            value={option}
-                          >
-                            {({ selected, active }) => (
-                              <>
-                                <span
-                                  className={classNames(
-                                    selected ? "font-semibold" : "font-normal",
-                                    "block truncate "
-                                  )}
-                                  data-testid={`${option}-${id ?? ""}-option`}
-                                >
-                                  {option}
-                                </span>
+                        {({ selected, active }) => (
+                          <>
+                            <span
+                              className={classNames(
+                                selected ? "font-semibold" : "font-normal",
+                                "block truncate "
+                              )}
+                              data-testid={`${option}-${id ?? ""}-option`}
+                            >
+                              {option}
+                            </span>
 
-                                {selected ? (
-                                  <span
-                                    className={classNames(
-                                      active ? "text-background " : "",
-                                      "dropdown-component-choosal"
-                                    )}
-                                  >
-                                    <IconComponent
-                                      name="Check"
-                                      className={
-                                        active
-                                          ? "dropdown-component-check-icon"
-                                          : "dropdown-component-check-icon"
-                                      }
-                                      aria-hidden="true"
-                                    />
-                                  </span>
-                                ) : null}
-                              </>
-                            )}
-                          </Listbox.Option>
-                        ))}
-                      </Listbox.Options>
-                    </Transition>
-                  </div>
-                </>
-              </Listbox>
-            ) : null
-          }
+                            {selected ? (
+                              <span
+                                className={classNames(
+                                  "dropdown-component-choosal"
+                                )}
+                              >
+                                <IconComponent
+                                  name="Check"
+                                  className={
+                                    "dropdown-component-check-icon text-foreground"
+                                  }
+                                  aria-hidden="true"
+                                />
+                              </span>
+                            ) : null}
+                          </>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                  </Listbox.Options>
+                </Transition>
+              </div>
+            </>
+          </Listbox>
         </>
       )}
 
       {options.length > 0 && (
         <span
-          className={
-            password
-              ? "dropdown-component-arrow  right-8"
-              : "dropdown-component-arrow right-0"
-          }
+          className={cn(
+            password ? "right-8" : "right-0",
+            "absolute inset-y-0 flex items-center pr-2"
+          )}
         >
-          <IconComponent
-            name="ChevronsUpDown"
-            className="dropdown-component-arrow-color"
-            aria-hidden="true"
-          />
+          <button
+            onClick={() => {
+              setShowOptions(!showOptions);
+            }}
+            className="text-muted-foreground hover:text-accent-foreground"
+          >
+            <IconComponent
+              name="Globe"
+              className="h-4 w-4"
+              aria-hidden="true"
+            />
+          </button>
         </span>
       )}
 
@@ -212,6 +224,7 @@ export default function InputComponent({
           type="button"
           tabIndex={-1}
           className={classNames(
+            "mb-px",
             editNode
               ? "input-component-true-button"
               : "input-component-false-button"
diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index c0a7deba2d..51f88ddf0a 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -10,7 +10,7 @@ import { useGlobalVariablesStore } from "../../../stores/globalVariables";
 
 //TODO IMPLEMENT FORM LOGIC
 
-export default function AddNewVariableButton(): JSX.Element {
+export default function AddNewVariableButton({children}): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
   const [provider, setProvider] = useState("");
@@ -33,25 +33,24 @@ export default function AddNewVariableButton(): JSX.Element {
     });
   }
   return (
-    <BaseModal open={open} setOpen={setOpen} size="small">
+    <BaseModal open={open} setOpen={setOpen} size="x-small">
       <BaseModal.Header
         description={"write a text variable to use anywhere on your flow"}
       >
         <span>Create a new Variable</span>
       </BaseModal.Header>
       <BaseModal.Trigger>
-        <Button>Create a new variable</Button>
+        {children}
       </BaseModal.Trigger>
       <BaseModal.Content>
-        <div className="flex h-full w-full flex-col justify-around align-middle">
-          <div className="h-1/2">
+        <div className="flex gap-4 h-full w-full flex-col align-middle">
             <Label>Variable name </Label>
             <Input
               value={key}
               onChange={(e) => {
                 setKey(e.target.value);
               }}
-              placeholder="example name"
+              placeholder="Insert a name for the variable..."
             ></Input>
             <Label>Provider (optional) </Label>
             <InputComponent
@@ -61,19 +60,17 @@ export default function AddNewVariableButton(): JSX.Element {
               }}
               password={false}
               options={["OPENAI_API_KEY", "ANTHROPIC_API_KEY"]}
-              placeholder="example provider"
+              placeholder="Choose a provider between the environment variables..."
             ></InputComponent>
-          </div>
-          <div className="h-1/2">
             <Label>Variable Value </Label>
             <Textarea
               value={value}
               onChange={(e) => {
                 setValue(e.target.value);
               }}
-              className="h-4/6 w-full resize-none custom-scroll"
+              placeholder="Insert a value for the variable..."
+              className="w-full resize-none custom-scroll"
             />
-          </div>
         </div>
       </BaseModal.Content>
       <BaseModal.Footer>
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index b0432fe7e4..8b23e520b0 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -40,6 +40,7 @@ import {
   GitBranchPlus,
   GitFork,
   GithubIcon,
+  Globe,
   Group,
   Hammer,
   Heart,
@@ -326,6 +327,7 @@ export const nodeIconsLucide: iconsType = {
   Circle,
   Clipboard,
   Code2,
+  Globe,
   Variable,
   Store,
   Download,

From c57aadbbc68554e39b9b93daf03719140c0a881a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 18 Mar 2024 18:30:55 -0300
Subject: [PATCH 30/83] Fix merge conflicts in backend code

---
 src/backend/langflow/api/v1/credential.py     |  17 +-
 src/backend/langflow/graph/vertex/base.py     | 508 +++++++++++++++---
 .../custom_component/custom_component.py      | 318 ++++++++---
 .../langflow/interface/initialize/loading.py  |  95 ++--
 src/backend/langflow/services/chat/utils.py   |   3 +-
 src/backend/langflow/template/field/base.py   |  56 +-
 6 files changed, 804 insertions(+), 193 deletions(-)

diff --git a/src/backend/langflow/api/v1/credential.py b/src/backend/langflow/api/v1/credential.py
index 6d9883ce7c..9bfa57c3a9 100644
--- a/src/backend/langflow/api/v1/credential.py
+++ b/src/backend/langflow/api/v1/credential.py
@@ -2,14 +2,17 @@
 from uuid import UUID
 
 from fastapi import APIRouter, Depends, HTTPException
-from sqlmodel import Session, select
-
 from langflow.services.auth import utils as auth_utils
 from langflow.services.auth.utils import get_current_active_user
-from langflow.services.database.models.credential import Credential, CredentialCreate, CredentialRead, CredentialUpdate
-from langflow.services.database.models.user.model import User
+from langflow.services.database.models.credential import (
+    Credential,
+    CredentialCreate,
+    CredentialRead,
+    CredentialUpdate,
+)
 from langflow.services.database.models.user.model import User
 from langflow.services.deps import get_session, get_settings_service
+from sqlmodel import Session, select
 
 router = APIRouter(prefix="/credentials", tags=["Credentials"])
 
@@ -26,7 +29,10 @@ def create_credential(
     try:
         # check if credential name already exists
         credential_exists = session.exec(
-            select(Credential).where(Credential.name == credential.name, Credential.user_id == current_user.id)
+            select(Credential).where(
+                Credential.name == credential.name,
+                Credential.user_id == current_user.id,
+            )
         ).first()
         if credential_exists:
             raise HTTPException(status_code=400, detail="Credential name already exists")
@@ -105,7 +111,6 @@ def delete_credential(
         ).first()
         if not db_credential:
             raise HTTPException(status_code=404, detail="Credential not found")
-
         session.delete(db_credential)
         session.commit()
         return db_credential
diff --git a/src/backend/langflow/graph/vertex/base.py b/src/backend/langflow/graph/vertex/base.py
index 4d7b627673..6a2d8665d3 100644
--- a/src/backend/langflow/graph/vertex/base.py
+++ b/src/backend/langflow/graph/vertex/base.py
@@ -1,20 +1,49 @@
 import ast
+import asyncio
 import inspect
 import types
-from typing import TYPE_CHECKING, Any, Coroutine, Dict, List, Optional
-
-from langflow.graph.utils import UnbuiltObject
+from enum import Enum
+from typing import (
+    TYPE_CHECKING,
+    Any,
+    AsyncIterator,
+    Callable,
+    Dict,
+    Iterator,
+    List,
+    Optional,
+)
+
+from langflow.graph.schema import (
+    INPUT_COMPONENTS,
+    INPUT_FIELD_NAME,
+    OUTPUT_COMPONENTS,
+    InterfaceComponentTypes,
+    ResultData,
+)
+from langflow.graph.utils import UnbuiltObject, UnbuiltResult
+from langflow.graph.vertex.utils import generate_result
 from langflow.interface.initialize import loading
 from langflow.interface.listing import lazy_load_dict
+from langflow.services.deps import get_storage_service
 from langflow.utils.constants import DIRECT_TYPES
-from langflow.utils.util import sync_to_async
+from langflow.utils.schemas import ChatOutputResponse
+from langflow.utils.util import sync_to_async, unescape_string
 from loguru import logger
 
 if TYPE_CHECKING:
-    from langflow.graph.edge.base import Edge
+    from langflow.graph.edge.base import ContractEdge
     from langflow.graph.graph.base import Graph
 
 
+class VertexStates(str, Enum):
+    """Vertex are related to it being active, inactive, or in an error state."""
+
+    ACTIVE = "active"
+    INACTIVE = "inactive"
+    ERROR = "error"
+
+
 class Vertex:
     def __init__(
         self,
@@ -24,25 +53,109 @@ def __init__(
         is_task: bool = False,
         params: Optional[Dict] = None,
     ) -> None:
-        self.graph = graph
+        # is_external means that the Vertex send or receives data from
+        # an external source (e.g the chat)
+        self._lock = asyncio.Lock()
+        self.will_stream = False
+        self.updated_raw_params = False
         self.id: str = data["id"]
+        self.is_state = False
+        self.is_input = any(input_component_name in self.id for input_component_name in INPUT_COMPONENTS)
+        self.is_output = any(output_component_name in self.id for output_component_name in OUTPUT_COMPONENTS)
+        self.has_session_id = None
+        self._custom_component = None
+        self.has_external_input = False
+        self.has_external_output = False
+        self.graph = graph
         self._data = data
         self.base_type: Optional[str] = base_type
         self._parse_data()
         self._built_object = UnbuiltObject()
+        self._built_result = None
         self._built = False
         self.artifacts: Dict[str, Any] = {}
+        self.steps: List[Callable] = [self._build]
+        self.steps_ran: List[Callable] = []
         self.task_id: Optional[str] = None
         self.is_task = is_task
         self.params = params or {}
         self.parent_node_id: Optional[str] = self._data.get("parent_node_id")
         self.load_from_db_fields: List[str] = []
         self.parent_is_top_level = False
+        self.layer = None
+        self.should_run = True
+        self.result: Optional[ResultData] = None
+        try:
+            self.is_interface_component = self.vertex_type in InterfaceComponentTypes
+        except ValueError:
+            self.is_interface_component = False
+
+        self.use_result = False
+        self.build_times: List[float] = []
+        self.state = VertexStates.ACTIVE
+
+    def update_graph_state(self, key, new_state, append: bool):
+        if append:
+            self.graph.append_state(key, new_state, caller=self.id)
+        else:
+            self.graph.update_state(key, new_state, caller=self.id)
+
+    def set_state(self, state: str):
+        self.state = VertexStates[state]
+        if self.state == VertexStates.INACTIVE and self.graph.in_degree_map[self.id] < 2:
+            # If the vertex is inactive and has only one in degree
+            # it means that it is not a merge point in the graph
+            self.graph.inactivated_vertices.add(self.id)
+        elif self.state == VertexStates.ACTIVE and self.id in self.graph.inactivated_vertices:
+            self.graph.inactivated_vertices.remove(self.id)
+
+    @property
+    def avg_build_time(self):
+        return sum(self.build_times) / len(self.build_times) if self.build_times else 0
+
+    def add_build_time(self, time):
+        self.build_times.append(time)
+
+    def set_result(self, result: ResultData) -> None:
+        self.result = result
+
+    def get_built_result(self):
+        # If the Vertex.type is a power component
+        # then we need to return the built object
+        # instead of the result dict
+        if self.is_interface_component and not isinstance(self._built_object, UnbuiltObject):
+            result = self._built_object
+            # if it is not a dict or a string and hasattr model_dump then
+            # return the model_dump
+            if not isinstance(result, (dict, str)) and hasattr(result, "content"):
+                return result.content
+            return result
+        if isinstance(self._built_object, str):
+            self._built_result = self._built_object
+
+        if isinstance(self._built_result, UnbuiltResult):
+            return {}
+        return self._built_result if isinstance(self._built_result, dict) else {"result": self._built_result}
+
+    def set_artifacts(self) -> None:
+        pass
 
     @property
-    def edges(self) -> List["Edge"]:
+    def edges(self) -> List["ContractEdge"]:
         return self.graph.get_vertex_edges(self.id)
 
+    @property
+    def predecessors(self) -> List["Vertex"]:
+        return self.graph.get_predecessors(self)
+
+    @property
+    def successors(self) -> List["Vertex"]:
+        return self.graph.get_successors(self)
+
+    @property
+    def successors_ids(self) -> List[str]:
+        return self.graph.successor_map.get(self.id, [])
+
     def __getstate__(self):
         return {
             "_data": self._data,
@@ -55,14 +168,20 @@ def __getstate__(self):
             "parent_node_id": self.parent_node_id,
             "parent_is_top_level": self.parent_is_top_level,
             "load_from_db_fields": self.load_from_db_fields,
+            "is_input": self.is_input,
+            "is_output": self.is_output,
         }
 
     def __setstate__(self, state):
+        self._lock = asyncio.Lock()
         self._data = state["_data"]
         self.params = state["params"]
         self.base_type = state["base_type"]
         self.is_task = state["is_task"]
         self.id = state["id"]
+        self.frozen = state.get("frozen", False)
+        self.is_input = state.get("is_input", False)
+        self.is_output = state.get("is_output", False)
         self._parse_data()
         if "_built_object" in state:
             self._built_object = state["_built_object"]
@@ -70,11 +189,17 @@ def __setstate__(self, state):
         else:
             self._built_object = UnbuiltObject()
             self._built = False
+        if "_built_result" in state:
+            self._built_result = state["_built_result"]
+        else:
+            self._built_result = UnbuiltResult()
         self.artifacts: Dict[str, Any] = {}
         self.task_id: Optional[str] = None
         self.parent_node_id = state["parent_node_id"]
         self.parent_is_top_level = state["parent_is_top_level"]
         self.load_from_db_fields = state["load_from_db_fields"]
+        self.layer = state.get("layer")
+        self.steps = state.get("steps", [self._build])
 
     def set_top_level(self, top_level_vertices: List[str]) -> None:
         self.parent_is_top_level = self.parent_node_id in top_level_vertices
@@ -82,8 +207,15 @@ def set_top_level(self, top_level_vertices: List[str]) -> None:
     def _parse_data(self) -> None:
         self.data = self._data["data"]
         self.output = self.data["node"]["base_classes"]
+        self.display_name = self.data["node"].get("display_name", self.id.split("-")[0])
+        self.frozen = self.data["node"].get("frozen", False)
+        self.selected_output_type = self.data["node"].get("selected_output_type")
+        self.is_input = self.data["node"].get("is_input") or self.is_input
+        self.is_output = self.data["node"].get("is_output") or self.is_output
         template_dicts = {key: value for key, value in self.data["node"]["template"].items() if isinstance(value, dict)}
 
+        self.has_session_id = "session_id" in template_dicts
+
         self.required_inputs = [
             template_dicts[key]["type"] for key, value in template_dicts.items() if value["required"]
         ]
@@ -135,8 +267,12 @@ def _build_params(self):
         if self.graph is None:
             raise ValueError("Graph not found")
 
+        if self.updated_raw_params:
+            self.updated_raw_params = False
+            return
+
         template_dict = {key: value for key, value in self.data["node"]["template"].items() if isinstance(value, dict)}
-        params = self.params.copy() if self.params else {}
+        params = {}
 
         for edge in self.edges:
             if not hasattr(edge, "target_param"):
@@ -152,7 +288,13 @@ def _build_params(self):
                         params[param_key] = []
                     params[param_key].append(self.graph.get_vertex(edge.source_id))
                 elif edge.target_id == self.id:
-                    params[param_key] = self.graph.get_vertex(edge.source_id)
+                    if isinstance(template_dict[param_key].get("value"), dict):
+                        # we don't know the key of the dict but we need to set the value
+                        # to the vertex that is the source of the edge
+                        param_dict = template_dict[param_key]["value"]
+                        params[param_key] = {key: self.graph.get_vertex(edge.source_id) for key in param_dict.keys()}
+                    else:
+                        params[param_key] = self.graph.get_vertex(edge.source_id)
 
         load_from_db_fields = []
         for field_name, field in template_dict.items():
@@ -169,16 +311,18 @@ def _build_params(self):
                 # what is inside value.get('content')
                 # value.get('value') is the file name
                 if file_path := field.get("file_path"):
-                    params[field_name] = file_path
+                    storage_service = get_storage_service()
+                    flow_id, file_name = file_path.split("/")
+                    full_path = storage_service.build_full_path(flow_id, file_name)
+                    params[field_name] = full_path
                 else:
-                    raise ValueError(f"File path not found for {self.vertex_type}")
+                    raise ValueError(f"File path not found for {self.display_name}")
             elif field.get("type") in DIRECT_TYPES and params.get(field_name) is None:
                 val = field.get("value")
                 if field.get("type") == "code":
                     try:
                         params[field_name] = ast.literal_eval(val) if val else None
-                    except Exception as exc:
-                        logger.debug(f"Error parsing code: {exc}")
+                    except Exception:
                         params[field_name] = val
                 elif field.get("type") in ["dict", "NestedDict"]:
                     # When dict comes from the frontend it comes as a
@@ -198,6 +342,16 @@ def _build_params(self):
                         params[field_name] = float(val)
                     except ValueError:
                         params[field_name] = val
+                        params[field_name] = val
+                elif field.get("type") == "str" and val is not None:
+                    # val may contain escaped \n, \t, etc.
+                    # so we need to unescape it
+                    if isinstance(val, list):
+                        params[field_name] = [unescape_string(v) for v in val]
+                    elif isinstance(val, str):
+                        params[field_name] = unescape_string(val)
+                elif val is not None and val != "":
+                    params[field_name] = val
 
                 elif val is not None and val != "":
                     params[field_name] = val
@@ -210,92 +364,226 @@ def _build_params(self):
                 else:
                     params.pop(field_name, None)
         # Add _type to params
-        self._raw_params = params
         self.params = params
         self.load_from_db_fields = load_from_db_fields
+        self._raw_params = params.copy()
+
+    def update_raw_params(self, new_params: Dict[str, str], overwrite: bool = False):
+        """
+        Update the raw parameters of the vertex with the given new parameters.
+
+        Args:
+            new_params (Dict[str, Any]): The new parameters to update.
+
+        Raises:
+            ValueError: If any key in new_params is not found in self._raw_params.
+        """
+        # First check if the input_value in _raw_params is not a vertex
+        if not new_params:
+            return
+        if any(isinstance(self._raw_params.get(key), Vertex) for key in new_params):
+            return
+        if not overwrite:
+            for key in new_params.copy():
+                if key not in self._raw_params:
+                    new_params.pop(key)
+        self._raw_params.update(new_params)
+        self.updated_raw_params = True
 
     async def _build(self, user_id=None):
         """
         Initiate the build process.
         """
-        logger.debug(f"Building {self.vertex_type}")
-        await self._build_each_node_in_params_dict(user_id)
+        logger.debug(f"Building {self.display_name}")
+        await self._build_each_vertex_in_params_dict(user_id)
         await self._get_and_instantiate_class(user_id)
         self._validate_built_object()
 
         self._built = True
 
-    async def _build_each_node_in_params_dict(self, user_id=None):
+    def extract_messages_from_artifacts(self, artifacts: Dict[str, Any]) -> List[dict]:
         """
-        Iterates over each node in the params dictionary and builds it.
+        Extracts messages from the artifacts.
+
+        Args:
+            artifacts (Dict[str, Any]): The artifacts to extract messages from.
+
+        Returns:
+            List[str]: The extracted messages.
+        """
+        messages = []
+        for key, artifact in artifacts.items():
+            if not isinstance(artifact, dict):
+                continue
+            if "message" in artifact:
+                chat_output_response = ChatOutputResponse(
+                    message=artifact["message"],
+                    sender=artifact.get("sender"),
+                    sender_name=artifact.get("sender_name"),
+                    session_id=artifact.get("session_id"),
+                    component_id=self.id,
+                )
+                messages.append(chat_output_response.model_dump(exclude_none=True))
+
+        return messages
+
+    def _finalize_build(self):
+        result_dict = self.get_built_result()
+        # We need to set the artifacts to pass information
+        # to the frontend
+        self.set_artifacts()
+        artifacts = self.artifacts
+        messages = self.extract_messages_from_artifacts(artifacts)
+        result_dict = ResultData(
+            results=result_dict,
+            artifacts=artifacts,
+            messages=messages,
+            component_display_name=self.display_name,
+            component_id=self.id,
+        )
+        self.set_result(result_dict)
+
+    async def _run(
+        self,
+        user_id: str,
+        inputs: Optional[dict] = None,
+        session_id: Optional[str] = None,
+    ):
+        # user_id is just for compatibility with the other build methods
+        inputs = inputs or {}
+        # inputs = {key: value or "" for key, value in inputs.items()}
+        # if hasattr(self._built_object, "input_keys"):
+        #     # test if all keys are in inputs
+        #     # and if not add them with empty string
+        #     # for key in self._built_object.input_keys:
+        #     #     if key not in inputs:
+        #     #         inputs[key] = ""
+        #     if inputs == {} and hasattr(self._built_object, "prompt"):
+        #         inputs = self._built_object.prompt.partial_variables
+        if isinstance(self._built_object, str):
+            self._built_result = self._built_object
+
+        result = await generate_result(self._built_object, inputs, self.has_external_output, session_id)
+        self._built_result = result
+
+    async def _build_each_vertex_in_params_dict(self, user_id=None):
         """
-        for key, value in self.params.copy().items():
-            if self._is_node(value):
+        Iterates over each vertex in the params dictionary and builds it.
+        """
+        for key, value in self._raw_params.items():
+            if self._is_vertex(value):
                 if value == self:
                     del self.params[key]
                     continue
-                await self._build_node_and_update_params(key, value, user_id)
-            elif isinstance(value, list) and self._is_list_of_nodes(value):
-                await self._build_list_of_nodes_and_update_params(key, value, user_id)
+                await self._build_vertex_and_update_params(
+                    key,
+                    value,
+                )
+            elif isinstance(value, list) and self._is_list_of_vertices(value):
+                await self._build_list_of_vertices_and_update_params(key, value)
+            elif isinstance(value, dict):
+                await self._build_dict_and_update_params(
+                    key,
+                    value,
+                )
+            elif key not in self.params or self.updated_raw_params:
+                self.params[key] = value
+
+    async def _build_dict_and_update_params(
+        self,
+        key,
+        vertices_dict: Dict[str, "Vertex"],
+    ):
+        """
+        Iterates over a dictionary of vertices, builds each and updates the params dictionary.
+        """
+        for sub_key, value in vertices_dict.items():
+            if not self._is_vertex(value):
+                self.params[key][sub_key] = value
+            else:
+                result = await value.get_result()
+                self.params[key][sub_key] = result
 
-    def _is_node(self, value):
+    def _is_vertex(self, value):
         """
         Checks if the provided value is an instance of Vertex.
         """
         return isinstance(value, Vertex)
 
-    def _is_list_of_nodes(self, value):
+    def _is_list_of_vertices(self, value):
         """
         Checks if the provided value is a list of Vertex instances.
         """
-        return all(self._is_node(node) for node in value)
+        return all(self._is_vertex(vertex) for vertex in value)
 
-    async def get_result(self, user_id=None, timeout=None) -> Any:
-        # Check if the Vertex was built already
-        if self._built:
-            return self._built_object
+    async def get_result(
+        self,
+    ) -> Any:
+        """
+        Retrieves the result of the vertex.
 
-        if self.is_task and self.task_id is not None:
-            task = self.get_task()
+        This is a read-only method so it raises an error if the vertex has not been built yet.
 
-            result = task.get(timeout=timeout)
-            if isinstance(result, Coroutine):
-                result = await result
-            if result is not None:  # If result is ready
-                self._update_built_object_and_artifacts(result)
-                return self._built_object
-            else:
-                # Handle the case when the result is not ready (retry, throw exception, etc.)
-                pass
+        Returns:
+            The result of the vertex.
+        """
+        async with self._lock:
+            return await self._get_result()
 
-        # If there's no task_id, build the vertex locally
-        await self.build(user_id=user_id)
-        return self._built_object
+    async def _get_result(self) -> Any:
+        """
+        Retrieves the result of the built component.
+
+        If the component has not been built yet, a ValueError is raised.
+
+        Returns:
+            The built result if use_result is True, else the built object.
+        """
+        if not self._built:
+            raise ValueError(f"Component {self.display_name} has not been built yet")
+        return self._built_result if self.use_result else self._built_object
 
-    async def _build_node_and_update_params(self, key, node, user_id=None):
+    async def _build_vertex_and_update_params(self, key, vertex: "Vertex"):
         """
-        Builds a given node and updates the params dictionary accordingly.
+        Builds a given vertex and updates the params dictionary accordingly.
         """
 
-        result = await node.get_result(user_id)
+        result = await vertex.get_result()
         self._handle_func(key, result)
         if isinstance(result, list):
             self._extend_params_list_with_result(key, result)
         self.params[key] = result
 
-    async def _build_list_of_nodes_and_update_params(self, key, nodes: List["Vertex"], user_id=None):
+    async def _build_list_of_vertices_and_update_params(
+        self,
+        key,
+        vertices: List["Vertex"],
+    ):
         """
-        Iterates over a list of nodes, builds each and updates the params dictionary.
+        Iterates over a list of vertices, builds each and updates the params dictionary.
         """
         self.params[key] = []
-        for node in nodes:
-            built = await node.get_result(user_id)
-            if isinstance(built, list):
-                if key not in self.params:
-                    self.params[key] = []
-                self.params[key].extend(built)
+        for vertex in vertices:
+            result = await vertex.get_result()
+            # Weird check to see if the params[key] is a list
+            # because sometimes it is a Record and breaks the code
+            if not isinstance(self.params[key], list):
+                self.params[key] = [self.params[key]]
+
+            if isinstance(result, list):
+                self.params[key].extend(result)
             else:
-                self.params[key].append(built)
+                try:
+                    if self.params[key] == result:
+                        continue
+
+                    self.params[key].append(result)
+                except AttributeError as e:
+                    logger.exception(e)
+                    raise ValueError(
+                        f"Params {key} ({self.params[key]}) is not a list and cannot be extended with {result}"
+                        f"Error building vertex {self.display_name}: {str(e)}"
+                    ) from e
 
     def _handle_func(self, key, result):
         """
@@ -324,26 +612,27 @@ async def _get_and_instantiate_class(self, user_id=None):
         Gets the class from a dictionary and instantiates it with the params.
         """
         if self.base_type is None:
-            raise ValueError(f"Base type for node {self.vertex_type} not found")
+            raise ValueError(f"Base type for vertex {self.display_name} not found")
         try:
             result = await loading.instantiate_class(
-                node_type=self.vertex_type,
-                base_type=self.base_type,
-                load_from_db_fields=self.load_from_db_fields,
-                params=self.params,
                 user_id=user_id,
+                vertex=self,
             )
             self._update_built_object_and_artifacts(result)
         except Exception as exc:
             logger.exception(exc)
-            raise ValueError(f"Error building node {self.vertex_type}(ID:{self.id}): {str(exc)}") from exc
+
+            raise ValueError(f"Error building vertex {self.display_name}: {str(exc)}") from exc
 
     def _update_built_object_and_artifacts(self, result):
         """
         Updates the built object and its artifacts.
         """
         if isinstance(result, tuple):
-            self._built_object, self.artifacts = result
+            if len(result) == 2:
+                self._built_object, self.artifacts = result
+            elif len(result) == 3:
+                self._custom_component, self._built_object, self.artifacts = result
         else:
             self._built_object = result
 
@@ -352,30 +641,105 @@ def _validate_built_object(self):
         Checks if the built object is None and raises a ValueError if so.
         """
         if isinstance(self._built_object, UnbuiltObject):
-            raise ValueError(f"{self.vertex_type}: {self._built_object_repr()}")
+            raise ValueError(f"{self.display_name}: {self._built_object_repr()}")
         elif self._built_object is None:
-            message = f"{self.vertex_type} returned None."
+            message = f"{self.display_name} returned None."
             if self.base_type == "custom_components":
                 message += " Make sure your build method returns a component."
 
             logger.warning(message)
+        elif isinstance(self._built_object, (Iterator, AsyncIterator)):
+            if self.display_name in ["Text Output"]:
+                raise ValueError(f"You are trying to stream to a {self.display_name}. Try using a Chat Output instead.")
 
-    async def build(self, force: bool = False, user_id=None, *args, **kwargs) -> Any:
-        if not self._built or force:
-            await self._build(user_id, *args, **kwargs)
+    def _reset(self, params_update: Optional[Dict[str, Any]] = None):
+        self._built = False
+        self._built_object = UnbuiltObject()
+        self._built_result = UnbuiltResult()
+        self.artifacts = {}
+        self.steps_ran = []
+        self._build_params()
 
-        return self._built_object
+    def _is_chat_input(self):
+        return False
+
+    def build_inactive(self):
+        # Just set the results to None
+        self._built = True
+        self._built_object = None
+        self._built_result = None
+
+    async def build(
+        self,
+        user_id=None,
+        inputs: Optional[Dict[str, Any]] = None,
+        requester: Optional["Vertex"] = None,
+        **kwargs,
+    ) -> Any:
+        async with self._lock:
+            if self.state == VertexStates.INACTIVE:
+                # If the vertex is inactive, return None
+                self.build_inactive()
+                return
+
+            if self.frozen and self._built:
+                return self.get_requester_result(requester)
+            elif self._built and requester is not None:
+                # This means that the vertex has already been built
+                # and we are just getting the result for the requester
+                return await self.get_requester_result(requester)
+            self._reset()
+
+            if self._is_chat_input() and inputs:
+                inputs = {"input_value": inputs.get(INPUT_FIELD_NAME, "")}
+                self.update_raw_params(inputs, overwrite=True)
+
+            # Run steps
+            for step in self.steps:
+                if step not in self.steps_ran:
+                    if inspect.iscoroutinefunction(step):
+                        await step(user_id=user_id, **kwargs)
+                    else:
+                        step(user_id=user_id, **kwargs)
+                    self.steps_ran.append(step)
+
+            self._finalize_build()
+
+        return await self.get_requester_result(requester)
+
+    async def get_requester_result(self, requester: Optional["Vertex"]):
+        # If the requester is None, this means that
+        # the Vertex is the root of the graph
+        if requester is None:
+            return self._built_object
+
+        # Get the requester edge
+        requester_edge = next((edge for edge in self.edges if edge.target_id == requester.id), None)
+        # Return the result of the requester edge
+        return (
+            None
+            if requester_edge is None
+            else await requester_edge.get_result_from_source(source=self, target=requester)
+        )
 
-    def add_edge(self, edge: "Edge") -> None:
+    def add_edge(self, edge: "ContractEdge") -> None:
         if edge not in self.edges:
             self.edges.append(edge)
 
     def __repr__(self) -> str:
-        return f"Vertex(id={self.id}, data={self.data})"
+        return f"Vertex(display_name={self.display_name}, id={self.id}, data={self.data})"
 
     def __eq__(self, __o: object) -> bool:
         try:
-            return self.id == __o.id if isinstance(__o, Vertex) else False
+            if not isinstance(__o, Vertex):
+                return False
+            # We should create a more robust comparison
+            # for the Vertex class
+            ids_are_equal = self.id == __o.id
+            # self._data is a dict and we need to compare them
+            # to check if they are equal
+            data_are_equal = self.data == __o.data
+            return ids_are_equal and data_are_equal
         except AttributeError:
             return False
 
diff --git a/src/backend/langflow/interface/custom/custom_component/custom_component.py b/src/backend/langflow/interface/custom/custom_component/custom_component.py
index ac53b05058..cfb2f41f38 100644
--- a/src/backend/langflow/interface/custom/custom_component/custom_component.py
+++ b/src/backend/langflow/interface/custom/custom_component/custom_component.py
@@ -1,20 +1,42 @@
 import operator
-from typing import Any, Callable, List, Optional, Union
+from pathlib import Path
+from typing import (
+    TYPE_CHECKING,
+    Any,
+    Callable,
+    ClassVar,
+    List,
+    Optional,
+    Sequence,
+    Union,
+)
+from uuid import UUID
 
 import yaml
 from cachetools import TTLCache, cachedmethod
-from fastapi import HTTPException
-
+from langchain_core.documents import Document
 from langflow.interface.custom.code_parser.utils import (
     extract_inner_type_from_generic_alias,
     extract_union_types_from_generic_alias,
 )
+from langflow.interface.custom.custom_component.component import Component
+from langflow.schema import Record
+from langflow.schema.dotdict import dotdict
 from langflow.services.database.models.flow import Flow
 from langflow.services.database.utils import session_getter
-from langflow.services.deps import get_credential_service, get_db_service
+from langflow.services.deps import (
+    get_credential_service,
+    get_db_service,
+    get_storage_service,
+)
+from langflow.services.storage.service import StorageService
 from langflow.utils import validate
+from pydantic import BaseModel
+from sqlmodel import select
 
-from .component import Component
+if TYPE_CHECKING:
+    from langflow.graph.graph.base import Graph
+    from langflow.graph.vertex.base import Vertex
 
 
 class CustomComponent(Component):
@@ -35,6 +57,67 @@ class CustomComponent(Component):
         _tree (Optional[dict]): The code tree of the custom component.
     """
 
+    display_name: Optional[str] = None
+    """The display name of the component. Defaults to None."""
+    description: Optional[str] = None
+    """The description of the component. Defaults to None."""
+    icon: Optional[str] = None
+    """The icon of the component. It should be an emoji. Defaults to None."""
+    is_input: Optional[bool] = None
+    """The input state of the component. Defaults to None.
+    If True, the component must have a field named 'input_value'."""
+    is_output: Optional[bool] = None
+    """The output state of the component. Defaults to None.
+    If True, the component must have a field named 'input_value'."""
+    code: Optional[str] = None
+    """The code of the component. Defaults to None."""
+    field_config: dict = {}
+    """The field configuration of the component. Defaults to an empty dictionary."""
+    field_order: Optional[List[str]] = None
+    """The field order of the component. Defaults to an empty list."""
+    frozen: Optional[bool] = False
+    """The default frozen state of the component. Defaults to False."""
+    build_parameters: Optional[dict] = None
+    """The build parameters of the component. Defaults to None."""
+    selected_output_type: Optional[str] = None
+    """The selected output type of the component. Defaults to None."""
+    vertex: Optional["Vertex"] = None
+    """The edge target parameter of the component. Defaults to None."""
+    code_class_base_inheritance: ClassVar[str] = "CustomComponent"
+    function_entrypoint_name: ClassVar[str] = "build"
+    function: Optional[Callable] = None
+    repr_value: Optional[Any] = ""
+    user_id: Optional[Union[UUID, str]] = None
+    status: Optional[Any] = None
+    """The status of the component. This is displayed on the frontend. Defaults to None."""
+    _flows_records: Optional[List[Record]] = None
+
+    def update_state(self, name: str, value: Any):
+        if not self.vertex:
+            raise ValueError("Vertex is not set")
+        try:
+            self.vertex.graph.update_state(name=name, record=value, caller=self.vertex.id)
+        except Exception as e:
+            raise ValueError(f"Error updating state: {e}")
+
+    def append_state(self, name: str, value: Any):
+        if not self.vertex:
+            raise ValueError("Vertex is not set")
+        try:
+            self.vertex.graph.append_state(name=name, record=value, caller=self.vertex.id)
+        except Exception as e:
+            raise ValueError(f"Error appending state: {e}")
+
+    def get_state(self, name: str):
+        if not self.vertex:
+            raise ValueError("Vertex is not set")
+        try:
+            return self.vertex.graph.get_state(name=name)
+        except Exception as e:
+            raise ValueError(f"Error getting state: {e}")
+
+    _tree: Optional[dict] = None
+
     def __init__(self, **data):
         """
         Initializes a new instance of the CustomComponent class.
@@ -45,6 +128,29 @@ def __init__(self, **data):
         self.cache = TTLCache(maxsize=1024, ttl=60)
         super().__init__(**data)
 
+    @staticmethod
+    def resolve_path(path: str) -> str:
+        """Resolves the path to an absolute path."""
+        path_object = Path(path)
+        if path_object.parts[0] == "~":
+            path_object = path_object.expanduser()
+        elif path_object.is_relative_to("."):
+            path_object = path_object.resolve()
+        return str(path_object)
+
+    def get_full_path(self, path: str) -> str:
+        storage_svc: "StorageService" = get_storage_service()
+
+        flow_id, file_name = path.split("/", 1)
+        return storage_svc.build_full_path(flow_id, file_name)
+
+    @property
+    def graph(self):
+        return self.vertex.graph
+
+    def _get_field_order(self):
+        return self.field_order or list(self.field_config.keys())
+
     def custom_repr(self):
         """
         Returns the custom representation of the custom component.
@@ -58,7 +164,7 @@ def custom_repr(self):
             return yaml.dump(self.repr_value)
         if isinstance(self.repr_value, str):
             return self.repr_value
-        return str(self.repr_value)
+        return self.repr_value
 
     def build_config(self):
         """
@@ -69,6 +175,15 @@ def build_config(self):
         """
         return self.field_config
 
+    def update_build_config(
+        self,
+        build_config: dotdict,
+        field_value: Any,
+        field_name: Optional[str] = None,
+    ):
+        build_config[field_name] = field_value
+        return build_config
+
     @property
     def tree(self):
         """
@@ -79,6 +194,78 @@ def tree(self):
         """
         return self.get_code_tree(self.code or "")
 
+    def to_records(self, data: Any, keys: Optional[List[str]] = None, silent_errors: bool = False) -> List[Record]:
+        """
+        Converts input data into a list of Record objects.
+
+        Args:
+            data (Any): The input data to be converted. It can be a single item or a sequence of items.
+            If the input data is a Langchain Document, text_key and data_key are ignored.
+
+            keys (List[str], optional): The keys to access the text and data values in each item.
+                It should be a list of strings where the first element is the text key and the second element is the data key.
+                Defaults to None, in which case the default keys "text" and "data" are used.
+
+        Returns:
+            List[Record]: A list of Record objects.
+
+        Raises:
+            ValueError: If the input data is not of a valid type or if the specified keys are not found in the data.
+
+        """
+        if not keys:
+            keys = []
+        records = []
+        if not isinstance(data, Sequence):
+            data = [data]
+        for item in data:
+            data_dict = {}
+            if isinstance(item, Document):
+                data_dict = item.metadata
+                data_dict["text"] = item.page_content
+            elif isinstance(item, BaseModel):
+                model_dump = item.model_dump()
+                for key in keys:
+                    if silent_errors:
+                        data_dict[key] = model_dump.get(key, "")
+                    else:
+                        try:
+                            data_dict[key] = model_dump[key]
+                        except KeyError:
+                            raise ValueError(f"Key {key} not found in {item}")
+
+            elif isinstance(item, str):
+                data_dict = {"text": item}
+            elif isinstance(item, dict):
+                data_dict = item.copy()
+            else:
+                raise ValueError(f"Invalid data type: {type(item)}")
+
+            records.append(Record(data=data_dict))
+
+        return records
+
+    def create_references_from_records(self, records: List[Record], include_data: bool = False) -> str:
+        """
+        Create references from a list of records.
+
+        Args:
+            records (List[dict]): A list of records, where each record is a dictionary.
+            include_data (bool, optional): Whether to include data in the references. Defaults to False.
+
+        Returns:
+            str: A string containing the references in markdown format.
+        """
+        if not records:
+            return ""
+        markdown_string = "---\n"
+        for record in records:
+            markdown_string += f"- Text: {record.text}"
+            if include_data:
+                markdown_string += f" Data: {record.data}"
+            markdown_string += "\n"
+        return markdown_string
+
     @property
     def get_function_entrypoint_args(self) -> list:
         """
@@ -93,17 +280,7 @@ def get_function_entrypoint_args(self) -> list:
 
         args = build_method["args"]
         for arg in args:
-            if arg.get("type") == "prompt":
-                raise HTTPException(
-                    status_code=400,
-                    detail={
-                        "error": "Type hint Error",
-                        "traceback": (
-                            "Prompt type is not supported in the build method." " Try using PromptTemplate instead."
-                        ),
-                    },
-                )
-            elif not arg.get("type") and arg.get("name") != "self":
+            if not arg.get("type") and arg.get("name") != "self":
                 # Set the type to Data
                 arg["type"] = "Data"
         return args
@@ -145,7 +322,10 @@ def get_function_entrypoint_return_type(self) -> List[Any]:
         return_type = build_method["return_type"]
 
         # If list or List is in the return type, then we remove it and return the inner type
-        if hasattr(return_type, "__origin__") and return_type.__origin__ in [list, List]:
+        if hasattr(return_type, "__origin__") and return_type.__origin__ in [
+            list,
+            List,
+        ]:
             return_type = extract_inner_type_from_generic_alias(return_type)
 
         # If the return type is not a Union, then we just return it as a list
@@ -265,7 +445,6 @@ def get_index(iterable: List[Any]):
 
         return get_index
 
-    @property
     def get_function(self):
         """
         Gets the function associated with the custom component.
@@ -275,18 +454,9 @@ def get_function(self):
         """
         return validate.create_function(self.code, self.function_entrypoint_name)
 
-    async def load_flow(self, flow_id: str, tweaks: Optional[dict] = None) -> Any:
-        """
-        Loads a flow with the specified ID and applies tweaks if provided.
-
-        Args:
-            flow_id (str): The ID of the flow to load.
-            tweaks (Optional[dict]): The tweaks to apply to the flow.
-
-        Returns:
-            Any: The loaded flow.
-        """
-        from langflow.processing.process import build_sorted_vertices, process_tweaks
+    async def load_flow(self, flow_id: str, tweaks: Optional[dict] = None) -> "Graph":
+        from langflow.graph.graph.base import Graph
+        from langflow.processing.process import process_tweaks
 
         db_service = get_db_service()
         with session_getter(db_service) as session:
@@ -295,62 +465,52 @@ async def load_flow(self, flow_id: str, tweaks: Optional[dict] = None) -> Any:
             raise ValueError(f"Flow {flow_id} not found")
         if tweaks:
             graph_data = process_tweaks(graph_data=graph_data, tweaks=tweaks)
-        return await build_sorted_vertices(graph_data, self.user_id)
+        graph = Graph.from_payload(graph_data, flow_id=flow_id)
+        return graph
 
-    def list_flows(self, *, get_session: Optional[Callable] = None) -> List[Flow]:
-        """
-        Lists the flows associated with the custom component.
-
-        Args:
-            get_session (Optional[Callable]): The function to get the session.
-
-        Returns:
-            List[Flow]: The list of flows associated with the custom component.
-        """
+    async def run_flow(
+        self,
+        input_value: Union[str, list[str]],
+        flow_id: Optional[str] = None,
+        flow_name: Optional[str] = None,
+        tweaks: Optional[dict] = None,
+    ) -> Any:
+        if not flow_id and not flow_name:
+            raise ValueError("Flow ID or Flow Name is required")
+        if not self._flows_records:
+            self.list_flows()
+        if not flow_id and self._flows_records:
+            flow_ids = [flow.data["id"] for flow in self._flows_records if flow.data["name"] == flow_name]
+            if not flow_ids:
+                raise ValueError(f"Flow {flow_name} not found")
+            elif len(flow_ids) > 1:
+                raise ValueError(f"Multiple flows found with the name {flow_name}")
+            flow_id = flow_ids[0]
+
+        if not flow_id:
+            raise ValueError(f"Flow {flow_name} not found")
+        if isinstance(input_value, str):
+            input_value = [input_value]
+        graph = await self.load_flow(flow_id, tweaks)
+        input_value_dict = [{"input_value": input_val} for input_val in input_value]
+        return await graph.run(input_value_dict, stream=False)
+
+    def list_flows(self, *, get_session: Optional[Callable] = None) -> List[Record]:
         if not self._user_id:
             raise ValueError("Session is invalid")
         try:
             get_session = get_session or session_getter
             db_service = get_db_service()
             with get_session(db_service) as session:
-                flows = session.query(Flow).filter(Flow.user_id == self.user_id).all()
-            return flows
-        except Exception as e:
-            raise ValueError("Session is invalid") from e
-
-    async def get_flow(
-        self,
-        *,
-        flow_name: Optional[str] = None,
-        flow_id: Optional[str] = None,
-        tweaks: Optional[dict] = None,
-        get_session: Optional[Callable] = None,
-    ) -> Flow:
-        """
-        Gets a flow with the specified name or ID and applies tweaks if provided.
-
-        Args:
-            flow_name (Optional[str]): The name of the flow to get.
-            flow_id (Optional[str]): The ID of the flow to get.
-            tweaks (Optional[dict]): The tweaks to apply to the flow.
-            get_session (Optional[Callable]): The function to get the session.
+                flows = session.exec(
+                    select(Flow).where(Flow.user_id == self._user_id).where(Flow.is_component == False)  # noqa
+                ).all()
 
-        Returns:
-            Flow: The flow with the specified name or ID.
-        """
-        get_session = get_session or session_getter
-        db_service = get_db_service()
-        with get_session(db_service) as session:
-            if flow_id:
-                flow = session.query(Flow).get(flow_id)
-            elif flow_name:
-                flow = (session.query(Flow).filter(Flow.name == flow_name).filter(Flow.user_id == self.user_id)).first()
-            else:
-                raise ValueError("Either flow_name or flow_id must be provided")
-
-        if not flow:
-            raise ValueError(f"Flow {flow_name or flow_id} not found")
-        return await self.load_flow(flow.id, tweaks)
+            flows_records = [flow.to_record() for flow in flows]
+            self._flows_records = flows_records
+            return flows_records
+        except Exception as e:
+            raise ValueError(f"Error listing flows: {e}")
 
     def build(self, *args: Any, **kwargs: Any) -> Any:
         """
diff --git a/src/backend/langflow/interface/initialize/loading.py b/src/backend/langflow/interface/initialize/loading.py
index fb986c9a48..a3e03bc239 100644
--- a/src/backend/langflow/interface/initialize/loading.py
+++ b/src/backend/langflow/interface/initialize/loading.py
@@ -11,49 +11,60 @@
 from langchain.document_loaders.base import BaseLoader
 from langchain_community.vectorstores import VectorStore
 from langchain_core.documents import Document
-from loguru import logger
-from pydantic import ValidationError
-
+from langflow.interface.custom.eval import eval_custom_component_code
+from langflow.interface.custom.utils import get_function
 from langflow.interface.custom_lists import CUSTOM_NODES
-from langflow.interface.importing.utils import eval_custom_component_code, get_function, import_by_type
+from langflow.interface.importing.utils import import_by_type
 from langflow.interface.initialize.llm import initialize_vertexai
-from langflow.interface.initialize.utils import handle_format_kwargs, handle_node_type, handle_partial_variables
+from langflow.interface.initialize.utils import (
+    handle_format_kwargs,
+    handle_node_type,
+    handle_partial_variables,
+)
 from langflow.interface.initialize.vector_store import vecstore_initializer
 from langflow.interface.output_parsers.base import output_parser_creator
 from langflow.interface.retrievers.base import retriever_creator
 from langflow.interface.toolkits.base import toolkits_creator
 from langflow.interface.utils import load_file_into_dict
 from langflow.interface.wrappers.base import wrapper_creator
+from langflow.schema.schema import Record
 from langflow.utils import validate
-
+from langflow.utils.util import unescape_string
+from loguru import logger
+from pydantic import ValidationError
 
 if TYPE_CHECKING:
     from langflow import CustomComponent
-
-
-def build_vertex_in_params(params: Dict) -> Dict:
     from langflow.graph.vertex.base import Vertex
 
-    # If any of the values in params is a Vertex, we will build it
-    return {key: value.build() if isinstance(value, Vertex) else value for key, value in params.items()}
-
 
 async def instantiate_class(
-    node_type: str, base_type: str, load_from_db_fields: list[str], params: Dict, user_id=None
+    vertex: "Vertex",
+    user_id=None,
 ) -> Any:
     """Instantiate class from module type and key, and params"""
+    vertex_type = vertex.vertex_type
+    base_type = vertex.base_type
+    params = vertex.params
     params = convert_params_to_sets(params)
     params = convert_kwargs(params)
 
-    if node_type in CUSTOM_NODES:
-        if custom_node := CUSTOM_NODES.get(node_type):
+    if vertex_type in CUSTOM_NODES:
+        if custom_node := CUSTOM_NODES.get(vertex_type):
             if hasattr(custom_node, "initialize"):
                 return custom_node.initialize(**params)
             return custom_node(**params)
-    logger.debug(f"Instantiating {node_type} of type {base_type}")
-    class_object = import_by_type(_type=base_type, name=node_type)
+    logger.debug(f"Instantiating {vertex_type} of type {base_type}")
+    if not base_type:
+        raise ValueError("No base type provided for vertex")
+    class_object = import_by_type(_type=base_type, name=vertex_type)
     return await instantiate_based_on_type(
-        class_object, base_type, node_type, load_from_db_fields, params, user_id=user_id
+        class_object=class_object,
+        base_type=base_type,
+        node_type=vertex_type,
+        params=params,
+        user_id=user_id,
+        vertex=vertex,
     )
 
 
@@ -81,7 +92,14 @@ def convert_kwargs(params):
     return params
 
 
-async def instantiate_based_on_type(class_object, base_type, node_type, load_from_db_fields, params, user_id):
+async def instantiate_based_on_type(
+    class_object,
+    base_type,
+    node_type,
+    params,
+    user_id,
+    vertex,
+):
     if base_type == "agents":
         return instantiate_agent(node_type, class_object, params)
     elif base_type == "prompts":
@@ -108,14 +126,20 @@ async def instantiate_based_on_type(class_object, base_type, node_type, load_fro
         return instantiate_chains(node_type, class_object, params)
     elif base_type == "output_parsers":
         return instantiate_output_parser(node_type, class_object, params)
-    elif base_type == "llms":
+    elif base_type == "models":
         return instantiate_llm(node_type, class_object, params)
     elif base_type == "retrievers":
         return instantiate_retriever(node_type, class_object, params)
     elif base_type == "memory":
         return instantiate_memory(node_type, class_object, params)
     elif base_type == "custom_components":
-        return await instantiate_custom_component(node_type, class_object, load_from_db_fields, params, user_id)
+        return await instantiate_custom_component(
+            node_type,
+            class_object,
+            params,
+            user_id,
+            vertex,
+        )
     elif base_type == "wrappers":
         return instantiate_wrapper(node_type, class_object, params)
     else:
@@ -137,11 +161,17 @@ def update_params_with_load_from_db_fields(custom_component: "CustomComponent",
     return params
 
 
-async def instantiate_custom_component(node_type, class_object, load_from_db_fields, params, user_id):
+async def instantiate_custom_component(node_type, class_object, params, user_id, vertex):
     params_copy = params.copy()
-    class_object: "CustomComponent" = eval_custom_component_code(params_copy.pop("code"))
-    custom_component = class_object(user_id=user_id)
-    params_copy = update_params_with_load_from_db_fields(custom_component, params_copy, load_from_db_fields)
+    class_object: Type["CustomComponent"] = eval_custom_component_code(params_copy.pop("code"))
+    custom_component: "CustomComponent" = class_object(
+        user_id=user_id,
+        parameters=params_copy,
+        vertex=vertex,
+        selected_output_type=vertex.selected_output_type,
+    )
+    params_copy = update_params_with_load_from_db_fields(custom_component, params_copy, vertex.load_from_db_fields)
+
     if "retriever" in params_copy and hasattr(params_copy["retriever"], "as_retriever"):
         params_copy["retriever"] = params_copy["retriever"].as_retriever()
 
@@ -150,12 +180,14 @@ async def instantiate_custom_component(node_type, class_object, load_from_db_fie
 
     if is_async:
         # Await the build method directly if it's async
-        built_object = await custom_component.build(**params_copy)
+        build_result = await custom_component.build(**params_copy)
     else:
         # Call the build method directly if it's sync
-        built_object = custom_component.build(**params_copy)
-
-    return built_object, {"repr": custom_component.custom_repr()}
+        build_result = custom_component.build(**params_copy)
+    custom_repr = custom_component.custom_repr()
+    if not custom_repr and isinstance(build_result, (dict, Record, str)):
+        custom_repr = build_result
+    return custom_component, build_result, {"repr": custom_repr}
 
 
 def instantiate_wrapper(node_type, class_object, params):
@@ -387,7 +419,10 @@ def instantiate_textsplitter(
         # separators might come in as an escaped string like \\n
         # so we need to convert it to a string
         if "separators" in params:
-            params["separators"] = params["separators"].encode().decode("unicode-escape")
+            if isinstance(params["separators"], str):
+                params["separators"] = unescape_string(params["separators"])
+            elif isinstance(params["separators"], list):
+                params["separators"] = [unescape_string(separator) for separator in params["separators"]]
         text_splitter = class_object(**params)
     else:
         from langchain.text_splitter import Language
diff --git a/src/backend/langflow/services/chat/utils.py b/src/backend/langflow/services/chat/utils.py
index 271c0e85be..0562b9df2a 100644
--- a/src/backend/langflow/services/chat/utils.py
+++ b/src/backend/langflow/services/chat/utils.py
@@ -3,11 +3,10 @@
 from langchain.agents import AgentExecutor
 from langchain.chains.base import Chain
 from langchain_core.runnables import Runnable
-from loguru import logger
-
 from langflow.api.v1.schemas import ChatMessage
 from langflow.interface.utils import try_setting_streaming_options
 from langflow.processing.base import get_result_and_steps
+from loguru import logger
 
 LANGCHAIN_RUNNABLES = (Chain, Runnable, AgentExecutor)
 
diff --git a/src/backend/langflow/template/field/base.py b/src/backend/langflow/template/field/base.py
index 5905877d6f..5e5c0a800d 100644
--- a/src/backend/langflow/template/field/base.py
+++ b/src/backend/langflow/template/field/base.py
@@ -1,7 +1,14 @@
 from typing import Any, Callable, Optional, Union
 
 from langflow.field_typing.range_spec import RangeSpec
-from pydantic import BaseModel, ConfigDict, Field, field_serializer
+from pydantic import (
+    BaseModel,
+    ConfigDict,
+    Field,
+    field_serializer,
+    field_validator,
+    model_serializer,
+)
 
 
 class TemplateField(BaseModel):
@@ -29,7 +36,7 @@ class TemplateField(BaseModel):
     """The value of the field. Default is None."""
 
     file_types: list[str] = Field(default=[], serialization_alias="fileTypes")
-    """List of file types associated with the field. Default is an empty list. (duplicate)"""
+    """List of file types associated with the field . Default is an empty list."""
 
     file_path: Optional[str] = ""
     """The file path of the field if it is a file. Defaults to None."""
@@ -58,18 +65,38 @@ class TemplateField(BaseModel):
     info: Optional[str] = ""
     """Additional information about the field to be shown in the tooltip. Defaults to an empty string."""
 
-    refresh: Optional[bool] = None
-    """Specifies if the field should be refreshed. Defaults to False."""
+    real_time_refresh: Optional[bool] = None
+    """Specifies if the field should have real time refresh. `refresh_button` must be False. Defaults to None."""
+
+    refresh_button: Optional[bool] = None
+    """Specifies if the field should have a refresh button. Defaults to False."""
+    refresh_button_text: Optional[str] = None
+    """Specifies the text for the refresh button. Defaults to None."""
 
     range_spec: Optional[RangeSpec] = Field(default=None, serialization_alias="rangeSpec")
     """Range specification for the field. Defaults to None."""
 
     load_from_db: bool = False
     """Specifies if the field should be loaded from the database. Defaults to False."""
+    title_case: bool = False
+    """Specifies if the field should be displayed in title case. Defaults to True."""
 
     def to_dict(self):
         return self.model_dump(by_alias=True, exclude_none=True)
 
+    @model_serializer(mode="wrap")
+    def serialize_model(self, handler):
+        result = handler(self)
+        # If the field is str, we add the Text input type
+        if self.field_type in ["str", "Text"]:
+            if "input_types" not in result:
+                result["input_types"] = ["Text"]
+        if self.field_type == "Text":
+            result["type"] = "str"
+        else:
+            result["type"] = self.field_type
+        return result
+
     @field_serializer("file_path")
     def serialize_file_path(self, value):
         return value if self.field_type == "file" else ""
@@ -79,3 +106,24 @@ def serialize_field_type(self, value, _info):
         if value == "float" and self.range_spec is None:
             self.range_spec = RangeSpec()
         return value
+
+    @field_serializer("display_name")
+    def serialize_display_name(self, value, _info):
+        # If display_name is not set, use name and convert to title case
+        # if title_case is True
+        if value is None:
+            # name is probably a snake_case string
+            # Ex: "file_path" -> "File Path"
+            value = self.name.replace("_", " ")
+            if self.title_case:
+                value = value.title()
+        return value
+
+    @field_validator("file_types")
+    def validate_file_types(cls, value):
+        if not isinstance(value, list):
+            raise ValueError("file_types must be a list")
+        return [
+            (f".{file_type}" if isinstance(file_type, str) and not file_type.startswith(".") else file_type)
+            for file_type in value
+        ]

From 9bcd74cbce4f9cb6fa28b19c6d1baae82ddbbc76 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 18 Mar 2024 18:38:35 -0300
Subject: [PATCH 31/83] Refactor code formatting and style

---
 src/backend/langflow/interface/initialize/loading.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/backend/langflow/interface/initialize/loading.py b/src/backend/langflow/interface/initialize/loading.py
index a3e03bc239..7d8be2f15c 100644
--- a/src/backend/langflow/interface/initialize/loading.py
+++ b/src/backend/langflow/interface/initialize/loading.py
@@ -35,6 +35,7 @@
 
 if TYPE_CHECKING:
     from langflow import CustomComponent
+
     from langflow.graph.vertex.base import Vertex
 
 
@@ -552,6 +553,3 @@ def build_prompt_template(prompt, tools):
     }
 
     return prompt
-    return prompt
-    return prompt
-    return prompt

From e38cf0dd6ced6d0512f8b6a9014d3d14d2d70a10 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 18 Mar 2024 23:40:25 +0100
Subject: [PATCH 32/83] Changed component.py to fix bug

---
 .../custom/custom_component/component.py      | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/backend/langflow/interface/custom/custom_component/component.py b/src/backend/langflow/interface/custom/custom_component/component.py
index ce40b0f748..594ec982f1 100644
--- a/src/backend/langflow/interface/custom/custom_component/component.py
+++ b/src/backend/langflow/interface/custom/custom_component/component.py
@@ -1,3 +1,4 @@
+import ast
 import operator
 import warnings
 from typing import Any, ClassVar, Optional
@@ -5,9 +6,7 @@
 from cachetools import TTLCache, cachedmethod
 from fastapi import HTTPException
 
-from langflow.interface.custom.attributes import ATTR_FUNC_MAPPING
 from langflow.interface.custom.code_parser import CodeParser
-from langflow.interface.custom.eval import eval_custom_component_code
 from langflow.utils import validate
 
 
@@ -39,8 +38,7 @@ def __init__(self, **data):
     def __setattr__(self, key, value):
         if key == "_user_id" and hasattr(self, "_user_id"):
             warnings.warn("user_id is immutable and cannot be changed.")
-        else:
-            super().__setattr__(key, value)
+        super().__setattr__(key, value)
 
     @cachedmethod(cache=operator.attrgetter("cache"))
     def get_code_tree(self, code: str):
@@ -65,19 +63,24 @@ def get_function(self):
 
         return validate.create_function(self.code, self._function_entrypoint_name)
 
-    def build_template_config(self) -> dict:
-        if not self.code:
-            return {}
-
-        cc_class = eval_custom_component_code(self.code)
-        component_instance = cc_class()
+    def build_template_config(self, attributes) -> dict:
         template_config = {}
 
-        for attribute, func in ATTR_FUNC_MAPPING.items():
-            if hasattr(component_instance, attribute):
-                value = getattr(component_instance, attribute)
-                if value is not None:
-                    template_config[attribute] = func(value=value)
+        for item in attributes:
+            item_name = item.get("name")
+
+            if item_value := item.get("value"):
+                if "display_name" in item_name:
+                    template_config["display_name"] = ast.literal_eval(item_value)
+
+                elif "description" in item_name:
+                    template_config["description"] = ast.literal_eval(item_value)
+
+                elif "beta" in item_name:
+                    template_config["beta"] = ast.literal_eval(item_value)
+
+                elif "documentation" in item_name:
+                    template_config["documentation"] = ast.literal_eval(item_value)
 
         return template_config
 

From 735d5ed80362ec0ef7acefdbcec514610a70022f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 18 Mar 2024 21:26:37 -0300
Subject: [PATCH 33/83] Add imports and update log level in run_langflow
 function

---
 src/backend/langflow/__main__.py | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/backend/langflow/__main__.py b/src/backend/langflow/__main__.py
index bc430e941a..ae7b3f979f 100644
--- a/src/backend/langflow/__main__.py
+++ b/src/backend/langflow/__main__.py
@@ -6,6 +6,11 @@
 
 import typer
 from dotenv import load_dotenv
+from langflow.main import setup_app
+from langflow.services.database.utils import session_getter
+from langflow.services.deps import get_db_service, get_settings_service
+from langflow.services.utils import initialize_services, initialize_settings_service
+from langflow.utils.logger import configure, logger
 from multiprocess import cpu_count  # type: ignore
 from rich import box
 from rich import print as rprint
@@ -14,12 +19,6 @@
 from rich.table import Table
 from sqlmodel import select
 
-from langflow.main import setup_app
-from langflow.services.database.utils import session_getter
-from langflow.services.deps import get_db_service, get_settings_service
-from langflow.services.utils import initialize_services, initialize_settings_service
-from langflow.utils.logger import configure, logger
-
 console = Console()
 
 app = typer.Typer(no_args_is_help=True)
@@ -304,7 +303,7 @@ def run_langflow(host, port, log_level, options, app):
                 app,
                 host=host,
                 port=port,
-                log_level=log_level,
+                log_level=log_level.lower(),
             )
         else:
             from langflow.server import LangflowApplication

From 50d27eeaa0518bb2af3137c526b6ca392985e7fb Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 18 Mar 2024 21:26:52 -0300
Subject: [PATCH 34/83] Remove duplicate import statements and unused imports

---
 src/backend/langflow/graph/vertex/base.py             |  2 --
 .../custom/custom_component/custom_component.py       | 11 -----------
 .../custom/directory_reader/directory_reader.py       |  3 +--
 src/backend/langflow/interface/initialize/loading.py  |  1 -
 4 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/backend/langflow/graph/vertex/base.py b/src/backend/langflow/graph/vertex/base.py
index 1a2d566700..6a2d8665d3 100644
--- a/src/backend/langflow/graph/vertex/base.py
+++ b/src/backend/langflow/graph/vertex/base.py
@@ -1,6 +1,5 @@
 import ast
 import asyncio
-import asyncio
 import inspect
 import types
 from enum import Enum
@@ -27,7 +26,6 @@
 from langflow.interface.initialize import loading
 from langflow.interface.listing import lazy_load_dict
 from langflow.services.deps import get_storage_service
-from langflow.services.deps import get_storage_service
 from langflow.utils.constants import DIRECT_TYPES
 from langflow.utils.schemas import ChatOutputResponse
 from langflow.utils.util import sync_to_async, unescape_string
diff --git a/src/backend/langflow/interface/custom/custom_component/custom_component.py b/src/backend/langflow/interface/custom/custom_component/custom_component.py
index d4367c98cb..cfb2f41f38 100644
--- a/src/backend/langflow/interface/custom/custom_component/custom_component.py
+++ b/src/backend/langflow/interface/custom/custom_component/custom_component.py
@@ -10,17 +10,6 @@
     Sequence,
     Union,
 )
-from pathlib import Path
-from typing import (
-    TYPE_CHECKING,
-    Any,
-    Callable,
-    ClassVar,
-    List,
-    Optional,
-    Sequence,
-    Union,
-)
 from uuid import UUID
 
 import yaml
diff --git a/src/backend/langflow/interface/custom/directory_reader/directory_reader.py b/src/backend/langflow/interface/custom/directory_reader/directory_reader.py
index 5acc151314..5f9487bb22 100644
--- a/src/backend/langflow/interface/custom/directory_reader/directory_reader.py
+++ b/src/backend/langflow/interface/custom/directory_reader/directory_reader.py
@@ -3,9 +3,8 @@
 import zlib
 from pathlib import Path
 
-from loguru import logger
-
 from langflow.interface.custom.custom_component import CustomComponent
+from loguru import logger
 
 
 class CustomComponentPathValueError(ValueError):
diff --git a/src/backend/langflow/interface/initialize/loading.py b/src/backend/langflow/interface/initialize/loading.py
index 376781657d..7d8be2f15c 100644
--- a/src/backend/langflow/interface/initialize/loading.py
+++ b/src/backend/langflow/interface/initialize/loading.py
@@ -28,7 +28,6 @@
 from langflow.interface.utils import load_file_into_dict
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.schema.schema import Record
-from langflow.schema.schema import Record
 from langflow.utils import validate
 from langflow.utils.util import unescape_string
 from loguru import logger

From d003be4fe26963a69f566ec4f9de7191afec8806 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 20 Mar 2024 18:05:16 +0100
Subject: [PATCH 35/83] Updated global variables to ShadCN and updated logic to
 show variables as different things

---
 src/frontend/package-lock.json                |  14 +
 src/frontend/package.json                     |   1 +
 .../components/parameterComponent/index.tsx   |  74 +++--
 .../src/components/inputComponent/index.tsx   | 257 ++++++++----------
 src/frontend/src/components/ui/command.tsx    |   2 +-
 src/frontend/src/components/ui/popover.tsx    |  19 +-
 src/frontend/src/types/components/index.ts    |   4 +
 7 files changed, 202 insertions(+), 169 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 2d61fd033e..e0fcfbd47c 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -42,6 +42,7 @@
         "base64-js": "^1.5.1",
         "class-variance-authority": "^0.6.1",
         "clsx": "^1.2.1",
+        "cmdk": "^1.0.0",
         "dompurify": "^3.0.5",
         "esbuild": "^0.17.19",
         "framer-motion": "^11.0.6",
@@ -4797,6 +4798,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/code-block-writer": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index dd865530e5..8b20d5e6b0 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -37,6 +37,7 @@
     "base64-js": "^1.5.1",
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
+    "cmdk": "^1.0.0",
     "dompurify": "^3.0.5",
     "esbuild": "^0.17.19",
     "framer-motion": "^11.0.6",
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 3e7df4e736..0ac69afe8d 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -16,6 +16,7 @@ import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
 import { Button } from "../../../../components/ui/button";
+import { CommandItem } from "../../../../components/ui/command";
 import { RefreshButton } from "../../../../components/ui/refreshButton";
 import {
   INPUT_HANDLER_HOVER,
@@ -23,6 +24,7 @@ import {
   OUTPUT_HANDLER_HOVER,
   TOOLTIP_EMPTY,
 } from "../../../../constants/constants";
+import AddNewVariableButton from "../../../../pages/globalVariablesPage/components/addNewVariableButton";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
@@ -46,7 +48,7 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils/styleUtils";
-import { classNames, groupByFamily } from "../../../../utils/utils";
+import { classNames, cn, groupByFamily } from "../../../../utils/utils";
 
 export default function ParameterComponent({
   left,
@@ -386,7 +388,7 @@ export default function ParameterComponent({
       <>
         <div
           className={
-            "w-full truncate text-sm flex items-center" +
+            "flex w-full items-center truncate text-sm" +
             (left ? "" : " text-end")
           }
         >
@@ -546,33 +548,47 @@ export default function ParameterComponent({
                     password={data.node?.template[name].password ?? false}
                     value={data.node?.template[name].value ?? ""}
                     options={globalVariablesEntries}
-                onChange={(value) => {
-                  handleOnNewValue(value);
-                  if (globalVariablesEntries.includes(value)) {
-                    setNoticeData({
-                      title: `the value inserted in ${data.node?.display_name} is a global variable, \n 
-                    the real value will be update on run`,
-                    });
-                    setNode(data.id, (oldNode) => {
-                      let newNode = cloneDeep(oldNode);
-                      newNode.data = {
-                        ...newNode.data,
-                      };
-                      newNode.data.node.template[name].load_from_db = true;
-                      return newNode;
-                    });
-                  } else {
-                    setNode(data.id, (oldNode) => {
-                      let newNode = cloneDeep(oldNode);
-                      newNode.data = {
-                        ...newNode.data,
-                      };
-                      newNode.data.node.template[name].load_from_db = false;
-                      return newNode;
-                    });
-                  }
-                  //mark as global variable
-                }}
+                    optionsPlaceholder={"Global Variables"}
+                    optionsButton={
+                      <AddNewVariableButton>
+                        <CommandItem value={"new"}>
+                          <IconComponent
+                            name="Plus"
+                            className={cn("mr-2 h-4 w-4 text-primary")}
+                            aria-hidden="true"
+                          />
+                          Add New Variable
+                        </CommandItem>
+                      </AddNewVariableButton>
+                    }
+                    selectedOption={
+                      data?.node?.template[name].load_from_db ?? false
+                        ? data?.node?.template[name].value
+                        : ""
+                    }
+                    setSelectedOption={(value) => {
+                      handleOnNewValue(value);
+                      setNode(data.id, (oldNode) => {
+                        let newNode = cloneDeep(oldNode);
+                        newNode.data = {
+                          ...newNode.data,
+                        };
+                        newNode.data.node.template[name].load_from_db =
+                          value === "" ? false : true;
+                        return newNode;
+                      });
+                    }}
+                    onChange={(value) => {
+                      handleOnNewValue(value);
+                      setNode(data.id, (oldNode) => {
+                        let newNode = cloneDeep(oldNode);
+                        newNode.data = {
+                          ...newNode.data,
+                        };
+                        newNode.data.node.template[name].load_from_db = false;
+                        return newNode;
+                      });
+                    }}
                   />
                 </div>
                 {data.node?.template[name].refresh_button && (
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index b3177954de..b9ed74dc2d 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -1,13 +1,20 @@
-import { Listbox, Transition } from "@headlessui/react";
 import * as Form from "@radix-ui/react-form";
-import { Fragment, useEffect, useRef, useState } from "react";
-import AddNewVariableButton from "../../pages/globalVariablesPage/components/addNewVariableButton";
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { useEffect, useRef, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames, cn } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/command";
 import { Input } from "../ui/input";
-import { Separator } from "../ui/separator";
+import { Popover, PopoverContentWithoutPortal } from "../ui/popover";
 
 export default function InputComponent({
   autoFocus = false,
@@ -23,7 +30,11 @@ export default function InputComponent({
   className,
   id = "",
   blurOnEnter = false,
+  selectedOption,
+  setSelectedOption,
   options = [],
+  optionsPlaceholder = "Search options...",
+  optionsButton,
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
@@ -36,10 +47,6 @@ export default function InputComponent({
     }
   }, [disabled]);
 
-  const filteredOptions = options.filter((option) =>
-    option.toLowerCase().includes(value.toLowerCase())
-  );
-
   function onInputLostFocus(event): void {
     if (onBlur) onBlur(event);
   }
@@ -81,144 +88,118 @@ export default function InputComponent({
         </Form.Control>
       ) : (
         <>
-          <Input
-            id={id}
-            ref={refInput}
-            type="text"
-            onBlur={onInputLostFocus}
-            value={value}
-            autoFocus={autoFocus}
-            disabled={disabled}
-            required={required}
-            className={classNames(
-              password && !pwdVisible && value !== ""
-                ? " text-clip password "
-                : "",
-              editNode ? " input-edit-node " : "",
-              password && editNode ? "pr-8" : "",
-              password && !editNode ? "pr-10" : "",
-              className!
-            )}
-            placeholder={password && editNode ? "Key" : placeholder}
-            onChange={(e) => {
-              onChange(e.target.value);
-            }}
-            onKeyDown={(e) => {
-              handleKeyDown(e, value, "");
-              if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
-            }}
-            data-testid={editNode ? id + "-edit" : id}
-        />
-          <Listbox
-            onChange={(val) => {
-              onChange(val);
-            }}
-          >
-            <>
-              <div className={"relative mt-1 "}>
-                <Transition
-                  show={showOptions}
-                  as={Fragment}
-                  leave="transition ease-in duration-100"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <Listbox.Options
-                    className={classNames(
-                      editNode
-                        ? "dropdown-component-true-options nowheel custom-scroll"
-                        : "dropdown-component-false-options nowheel custom-scroll",
-                      false ? "mb-2 w-[250px]" : "absolute w-full"
-                    )}
-                  >
-                    <div className="flex items-center justify-between px-4 pb-3 pt-2 font-semibold">
-                      <div className="flex items-center gap-2">
-                        <IconComponent name="Globe" className="h-4 w-4" />
-                        Global Variables
-                      </div>
-                      <div>
-                        <AddNewVariableButton>
-                          <button className="text-muted-foreground hover:text-accent-foreground">
-                            <IconComponent name="Plus" className="h-5 w-5" />
-                          </button>
-                        </AddNewVariableButton>
-                      </div>
-                    </div>
-                    <Separator />
-                    {filteredOptions.map((option, id) => (
-                      <Listbox.Option
+          <Popover open={showOptions} onOpenChange={setShowOptions}>
+            <PopoverAnchor>
+              <Input
+                id={id}
+                ref={refInput}
+                type="text"
+                onBlur={onInputLostFocus}
+                value={value}
+                autoFocus={autoFocus}
+                disabled={disabled || selectedOption !== ""}
+                onClick={() => {
+                  selectedOption !== "" && setShowOptions(true);
+                }}
+                required={required}
+                className={classNames(
+                  password && !pwdVisible && value !== ""
+                    ? " text-clip password "
+                    : "",
+                  editNode ? " input-edit-node " : "",
+                  password && editNode ? "pr-8" : "",
+                  password && !editNode ? "pr-10" : "",
+                  className!
+                )}
+                placeholder={password && editNode ? "Key" : placeholder}
+                onChange={(e) => {
+                  onChange(e.target.value);
+                }}
+                onKeyDown={(e) => {
+                  handleKeyDown(e, value, "");
+                  if (blurOnEnter && e.key === "Enter")
+                    refInput.current?.blur();
+                }}
+                data-testid={editNode ? id + "-edit" : id}
+              />
+            </PopoverAnchor>
+            <PopoverContentWithoutPortal
+              className="nocopy nopan nodelete nodrag noundo p-0"
+              style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
+              side="bottom"
+              align="center"
+            >
+              <Command>
+                <CommandInput placeholder={optionsPlaceholder} />
+                <CommandList>
+                  <CommandEmpty>No results found.</CommandEmpty>
+                  <CommandGroup defaultChecked={false}>
+                    {options.map((option, id) => (
+                      <CommandItem
                         key={id}
-                        className={({ active }) =>
-                          classNames(
-                            active ? " bg-accent" : "",
-                            editNode
-                              ? "dropdown-component-false-option"
-                              : "dropdown-component-true-option",
-                            " hover:bg-accent"
-                          )
-                        }
                         value={option}
+                        onSelect={(currentValue) => {
+                          setSelectedOption &&
+                            setSelectedOption(
+                              currentValue === selectedOption
+                                ? ""
+                                : currentValue
+                            );
+                          setShowOptions(false);
+                        }}
                       >
-                        {({ selected, active }) => (
-                          <>
-                            <span
-                              className={classNames(
-                                selected ? "font-semibold" : "font-normal",
-                                "block truncate "
-                              )}
-                              data-testid={`${option}-${id ?? ""}-option`}
-                            >
-                              {option}
-                            </span>
-
-                            {selected ? (
-                              <span
-                                className={classNames(
-                                  "dropdown-component-choosal"
-                                )}
-                              >
-                                <IconComponent
-                                  name="Check"
-                                  className={
-                                    "dropdown-component-check-icon text-foreground"
-                                  }
-                                  aria-hidden="true"
-                                />
-                              </span>
-                            ) : null}
-                          </>
-                        )}
-                      </Listbox.Option>
+                        <IconComponent
+                          name="Check"
+                          className={cn(
+                            "mr-2 h-4 w-4 text-primary",
+                            selectedOption === option
+                              ? "opacity-100"
+                              : "opacity-0"
+                          )}
+                          aria-hidden="true"
+                        />
+                        {option}
+                      </CommandItem>
                     ))}
-                  </Listbox.Options>
-                </Transition>
-              </div>
-            </>
-          </Listbox>
+                    {optionsButton && optionsButton}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContentWithoutPortal>
+          </Popover>
+          <div
+            className={cn(
+              "pointer-events-auto absolute inset-y-0 h-full w-full",
+              selectedOption !== "" ? "" : "hidden"
+            )}
+            onClick={
+              selectedOption !== ""
+                ? (e) => {
+                    setShowOptions((old) => !old);
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }
+                : () => {}
+            }
+          ></div>
         </>
       )}
 
-      {options.length > 0 && (
-        <span
-          className={cn(
-            password ? "right-8" : "right-0",
-            "absolute inset-y-0 flex items-center pr-2"
-          )}
+      <span
+        className={cn(
+          password ? "right-8" : "right-0",
+          "absolute inset-y-0 flex items-center pr-2"
+        )}
+      >
+        <button
+          onClick={() => {
+            setShowOptions(!showOptions);
+          }}
+          className="text-muted-foreground hover:text-accent-foreground"
         >
-          <button
-            onClick={() => {
-              setShowOptions(!showOptions);
-            }}
-            className="text-muted-foreground hover:text-accent-foreground"
-          >
-            <IconComponent
-              name="Globe"
-              className="h-4 w-4"
-              aria-hidden="true"
-            />
-          </button>
-        </span>
-      )}
+          <IconComponent name="Globe" className="h-4 w-4" aria-hidden="true" />
+        </button>
+      </span>
 
       {password && (
         <button
diff --git a/src/frontend/src/components/ui/command.tsx b/src/frontend/src/components/ui/command.tsx
index 4d38757a6f..57088882b8 100644
--- a/src/frontend/src/components/ui/command.tsx
+++ b/src/frontend/src/components/ui/command.tsx
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       className
     )}
     {...props}
diff --git a/src/frontend/src/components/ui/popover.tsx b/src/frontend/src/components/ui/popover.tsx
index 2a7a6988dc..34a6f31425 100644
--- a/src/frontend/src/components/ui/popover.tsx
+++ b/src/frontend/src/components/ui/popover.tsx
@@ -27,4 +27,21 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverContent, PopoverTrigger };
+const PopoverContentWithoutPortal = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+PopoverContentWithoutPortal.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverContentWithoutPortal, PopoverTrigger };
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 590664c22b..bf561f4713 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -20,7 +20,11 @@ export type InputComponentType = {
   className?: string;
   id?: string;
   blurOnEnter?: boolean;
+  optionsPlaceholder?: string;
   options?: string[];
+  optionsButton?: ReactElement;
+  selectedOption?: string;
+  setSelectedOption?: (value: string) => void;
 };
 export type ToggleComponentType = {
   enabled: boolean;

From 1b6102524ac059dab09c0ceaf123f2bc649a01a7 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 20 Mar 2024 18:26:05 +0100
Subject: [PATCH 36/83] Fixed logic when options are present but its not global
 variables.

---
 .../src/components/inputComponent/index.tsx   | 55 ++++++++------
 .../components/addNewVariableButton.tsx       | 72 ++++++++++---------
 src/frontend/src/types/components/index.ts    |  4 +-
 3 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index b9ed74dc2d..5c0ffe93e0 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames, cn } from "../../utils/utils";
-import IconComponent from "../genericIconComponent";
+import ForwardedIconComponent from "../genericIconComponent";
 import {
   Command,
   CommandEmpty,
@@ -19,7 +19,7 @@ import { Popover, PopoverContentWithoutPortal } from "../ui/popover";
 export default function InputComponent({
   autoFocus = false,
   onBlur,
-  value,
+  value = "",
   onChange,
   disabled,
   required = false,
@@ -42,7 +42,7 @@ export default function InputComponent({
 
   // Clear component state
   useEffect(() => {
-    if (disabled && value !== "") {
+    if (disabled && value && onChange && value !== "") {
       onChange("");
     }
   }, [disabled]);
@@ -75,7 +75,7 @@ export default function InputComponent({
             )}
             placeholder={password && editNode ? "Key" : placeholder}
             onChange={(e) => {
-              onChange(e.target.value);
+              onChange && onChange(e.target.value);
             }}
             onCopy={(e) => {
               e.preventDefault();
@@ -95,25 +95,30 @@ export default function InputComponent({
                 ref={refInput}
                 type="text"
                 onBlur={onInputLostFocus}
-                value={value}
+                value={
+                  selectedOption !== "" || !onChange ? selectedOption : value
+                }
                 autoFocus={autoFocus}
-                disabled={disabled || selectedOption !== ""}
+                disabled={disabled}
                 onClick={() => {
-                  selectedOption !== "" && setShowOptions(true);
+                  (selectedOption !== "" || !onChange) && setShowOptions(true);
                 }}
                 required={required}
                 className={classNames(
-                  password && !pwdVisible && value !== ""
+                  password &&
+                    selectedOption === "" &&
+                    !pwdVisible &&
+                    value !== ""
                     ? " text-clip password "
                     : "",
                   editNode ? " input-edit-node " : "",
-                  password && editNode ? "pr-8" : "",
-                  password && !editNode ? "pr-10" : "",
+                  password && selectedOption === "" && editNode ? "pr-8" : "",
+                  password && selectedOption === "" && !editNode ? "pr-10" : "",
                   className!
                 )}
                 placeholder={password && editNode ? "Key" : placeholder}
                 onChange={(e) => {
-                  onChange(e.target.value);
+                  onChange && onChange(e.target.value);
                 }}
                 onKeyDown={(e) => {
                   handleKeyDown(e, value, "");
@@ -148,7 +153,7 @@ export default function InputComponent({
                           setShowOptions(false);
                         }}
                       >
-                        <IconComponent
+                        <ForwardedIconComponent
                           name="Check"
                           className={cn(
                             "mr-2 h-4 w-4 text-primary",
@@ -169,11 +174,11 @@ export default function InputComponent({
           </Popover>
           <div
             className={cn(
-              "pointer-events-auto absolute inset-y-0 h-full w-full",
-              selectedOption !== "" ? "" : "hidden"
+              "pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
+              selectedOption !== "" || !onChange ? "" : "hidden"
             )}
             onClick={
-              selectedOption !== ""
+              selectedOption !== "" || !onChange
                 ? (e) => {
                     setShowOptions((old) => !old);
                     e.preventDefault();
@@ -187,21 +192,30 @@ export default function InputComponent({
 
       <span
         className={cn(
-          password ? "right-8" : "right-0",
-          "absolute inset-y-0 flex items-center pr-2"
+          password && selectedOption === "" ? "right-8" : "right-0",
+          "absolute inset-y-0 flex items-center pr-2.5"
         )}
       >
         <button
           onClick={() => {
             setShowOptions(!showOptions);
           }}
-          className="text-muted-foreground hover:text-accent-foreground"
+          className={cn(
+            selectedOption !== ""
+              ? "text-medium-indigo"
+              : "text-muted-foreground",
+            "hover:text-accent-foreground"
+          )}
         >
-          <IconComponent name="Globe" className="h-4 w-4" aria-hidden="true" />
+          <ForwardedIconComponent
+            name="Globe"
+            className={"h-4 w-4"}
+            aria-hidden="true"
+          />
         </button>
       </span>
 
-      {password && (
+      {password && selectedOption === "" && (
         <button
           type="button"
           tabIndex={-1}
@@ -217,6 +231,7 @@ export default function InputComponent({
           }}
         >
           {password &&
+            selectedOption === "" &&
             (pwdVisible ? (
               <svg
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
index 51f88ddf0a..d2ab94134c 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import ForwardedIconComponent from "../../../components/genericIconComponent";
 import InputComponent from "../../../components/inputComponent";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
@@ -10,7 +11,7 @@ import { useGlobalVariablesStore } from "../../../stores/globalVariables";
 
 //TODO IMPLEMENT FORM LOGIC
 
-export default function AddNewVariableButton({children}): JSX.Element {
+export default function AddNewVariableButton({ children }): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
   const [provider, setProvider] = useState("");
@@ -35,42 +36,45 @@ export default function AddNewVariableButton({children}): JSX.Element {
   return (
     <BaseModal open={open} setOpen={setOpen} size="x-small">
       <BaseModal.Header
-        description={"write a text variable to use anywhere on your flow"}
+        description={"Write a text global variable to use in any flow."}
       >
-        <span>Create a new Variable</span>
+        <span className="pr-2"> Create Variable </span>
+        <ForwardedIconComponent
+          name="Globe"
+          className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
+        />
       </BaseModal.Header>
-      <BaseModal.Trigger>
-        {children}
-      </BaseModal.Trigger>
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Content>
-        <div className="flex gap-4 h-full w-full flex-col align-middle">
-            <Label>Variable name </Label>
-            <Input
-              value={key}
-              onChange={(e) => {
-                setKey(e.target.value);
-              }}
-              placeholder="Insert a name for the variable..."
-            ></Input>
-            <Label>Provider (optional) </Label>
-            <InputComponent
-              value={provider}
-              onChange={(e) => {
-                setProvider(e);
-              }}
-              password={false}
-              options={["OPENAI_API_KEY", "ANTHROPIC_API_KEY"]}
-              placeholder="Choose a provider between the environment variables..."
-            ></InputComponent>
-            <Label>Variable Value </Label>
-            <Textarea
-              value={value}
-              onChange={(e) => {
-                setValue(e.target.value);
-              }}
-              placeholder="Insert a value for the variable..."
-              className="w-full resize-none custom-scroll"
-            />
+        <div className="flex h-full w-full flex-col gap-4 align-middle">
+          <Label>Variable name </Label>
+          <Input
+            value={key}
+            onChange={(e) => {
+              setKey(e.target.value);
+            }}
+            placeholder="Insert a name for the variable..."
+          ></Input>
+          <Label>Provider (optional) </Label>
+          <InputComponent
+            setSelectedOption={(e) => {
+              setProvider(e);
+            }}
+            selectedOption={provider}
+            password={false}
+            options={["OPENAI_API_KEY", "ANTHROPIC_API_KEY"]}
+            placeholder="Choose a provider between the environment variables..."
+          ></InputComponent>
+          <Label>Variable Value </Label>
+          <Textarea
+            value={value}
+            onChange={(e) => {
+              setValue(e.target.value);
+            }}
+            placeholder="Insert a value for the variable..."
+            className="w-full resize-none custom-scroll"
+          />
         </div>
       </BaseModal.Content>
       <BaseModal.Footer>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index bf561f4713..e3bce87049 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -7,9 +7,9 @@ import { sourceHandleType, targetHandleType } from "./../flow/index";
 export type InputComponentType = {
   autoFocus?: boolean;
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  value: string;
+  value?: string;
   disabled?: boolean;
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   password: boolean;
   required?: boolean;
   isForm?: boolean;

From 6dc4599a9b5f2645b2b3000fe9559f677f77ad56 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 20 Mar 2024 18:28:59 +0100
Subject: [PATCH 37/83] Changed icons for other options that are not global
 variable

---
 .../GenericNode/components/parameterComponent/index.tsx        | 1 +
 src/frontend/src/components/inputComponent/index.tsx           | 3 ++-
 src/frontend/src/types/components/index.ts                     | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 0ac69afe8d..2bc10df644 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -549,6 +549,7 @@ export default function ParameterComponent({
                     value={data.node?.template[name].value ?? ""}
                     options={globalVariablesEntries}
                     optionsPlaceholder={"Global Variables"}
+                    optionsIcon="Globe"
                     optionsButton={
                       <AddNewVariableButton>
                         <CommandItem value={"new"}>
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 5c0ffe93e0..6c3d95f369 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -30,6 +30,7 @@ export default function InputComponent({
   className,
   id = "",
   blurOnEnter = false,
+  optionsIcon = "ChevronsUpDown",
   selectedOption,
   setSelectedOption,
   options = [],
@@ -208,7 +209,7 @@ export default function InputComponent({
           )}
         >
           <ForwardedIconComponent
-            name="Globe"
+            name={optionsIcon}
             className={"h-4 w-4"}
             aria-hidden="true"
           />
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index e3bce87049..7290b49a59 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -20,6 +20,7 @@ export type InputComponentType = {
   className?: string;
   id?: string;
   blurOnEnter?: boolean;
+  optionsIcon?: string;
   optionsPlaceholder?: string;
   options?: string[];
   optionsButton?: ReactElement;

From 41cbd918b7c08b4e0a8e58f558b72e7f9f60ae16 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 20 Mar 2024 18:32:52 +0100
Subject: [PATCH 38/83] Deleted variables page

---
 .../components/parameterComponent/index.tsx   |  2 +-
 .../addNewVariableButton.tsx                  | 18 +++---
 .../src/pages/globalVariablesPage/index.tsx   | 58 -------------------
 src/frontend/src/routes.tsx                   |  9 ---
 4 files changed, 10 insertions(+), 77 deletions(-)
 rename src/frontend/src/{pages/globalVariablesPage/components => components/addNewVariableButtonComponent}/addNewVariableButton.tsx (81%)
 delete mode 100644 src/frontend/src/pages/globalVariablesPage/index.tsx

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 2bc10df644..a0fda55fd9 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -24,7 +24,7 @@ import {
   OUTPUT_HANDLER_HOVER,
   TOOLTIP_EMPTY,
 } from "../../../../constants/constants";
-import AddNewVariableButton from "../../../../pages/globalVariablesPage/components/addNewVariableButton";
+import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
diff --git a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
similarity index 81%
rename from src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
rename to src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index d2ab94134c..84e7d1c7ae 100644
--- a/src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -1,13 +1,13 @@
 import { useState } from "react";
-import ForwardedIconComponent from "../../../components/genericIconComponent";
-import InputComponent from "../../../components/inputComponent";
-import { Button } from "../../../components/ui/button";
-import { Input } from "../../../components/ui/input";
-import { Label } from "../../../components/ui/label";
-import { Textarea } from "../../../components/ui/textarea";
-import { registerGlobalVariable } from "../../../controllers/API";
-import BaseModal from "../../../modals/baseModal";
-import { useGlobalVariablesStore } from "../../../stores/globalVariables";
+import ForwardedIconComponent from "../genericIconComponent";
+import InputComponent from "../inputComponent";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Textarea } from "../ui/textarea";
+import { registerGlobalVariable } from "../../controllers/API";
+import BaseModal from "../../modals/baseModal";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
 
 //TODO IMPLEMENT FORM LOGIC
 
diff --git a/src/frontend/src/pages/globalVariablesPage/index.tsx b/src/frontend/src/pages/globalVariablesPage/index.tsx
deleted file mode 100644
index 5a9a6fabf6..0000000000
--- a/src/frontend/src/pages/globalVariablesPage/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import IconComponent from "../../components/genericIconComponent";
-import PageLayout from "../../components/pageLayout";
-import { deleteGlobalVariable } from "../../controllers/API";
-import { useGlobalVariablesStore } from "../../stores/globalVariables";
-import AddNewVariableButton from "./components/addNewVariableButton";
-
-//TODO: improve UI
-
-export default function GlobalVariablesPage() {
-  const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries
-  );
-  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
-  const removeGlobalVariable = useGlobalVariablesStore(
-    (state) => state.removeGlobalVariable
-  );
-
-  function handleDelete(key: string) {
-    const id = getVariableId(key);
-    if(id!==undefined)
-    {
-      deleteGlobalVariable(id).then((_) => removeGlobalVariable(key));
-
-    }else{
-      console.error("id is undefined");
-    }
-  }
-  return (
-    <PageLayout
-      title="Variables"
-      description="set your own personal varaibles and use it on your flow"
-    >
-      {globalVariablesEntries.length > 0 ? (
-        <div className="flex h-full w-full flex-col justify-around">
-          {globalVariablesEntries.map((key, index) => (
-            <div className="flex w-full items-start" key={index}>
-              <span>{key}</span>
-              <ShadTooltip content="Delete">
-                <button onClick={(_) => handleDelete(key)} className="ml-auto">
-                  <IconComponent name="Trash2" />
-                </button>
-              </ShadTooltip>
-            </div>
-          ))}
-          <AddNewVariableButton />
-        </div>
-      ) : (
-        <div className="flex h-full w-full flex-col items-center justify-center align-middle">
-          <div>
-            <p> create your first variable</p>
-            <AddNewVariableButton />
-          </div>
-        </div>
-      )}
-    </PageLayout>
-  );
-}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 0c3cd1ac8c..b48e5147d2 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -15,7 +15,6 @@ import ProfileSettingsPage from "./pages/ProfileSettingsPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
-import GlobalVariablesPage from "./pages/globalVariablesPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
 
@@ -154,14 +153,6 @@ const Router = () => {
           }
         ></Route>
       </Route>
-      <Route
-        path="variables"
-        element={
-          <ProtectedRoute>
-            <GlobalVariablesPage />
-          </ProtectedRoute>
-        }
-      ></Route>
     </Routes>
   );
 };

From ea211060b3d644e7833cf1179d40ac2a6a781530 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 21 Mar 2024 15:11:27 +0100
Subject: [PATCH 39/83] Implemented Delete function

---
 src/frontend/package-lock.json                | 779 ++++++++----------
 .../components/parameterComponent/index.tsx   |  68 +-
 .../src/components/inputComponent/index.tsx   |  33 +-
 .../modals/DeleteConfirmationModal/index.tsx  |  23 +-
 src/frontend/src/types/components/index.ts    |   1 +
 5 files changed, 464 insertions(+), 440 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index e0fcfbd47c..907b699985 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -125,12 +125,12 @@
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -151,104 +151,40 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
       "dependencies": {
-        "@babel/highlight": "^7.23.4",
-        "chalk": "^2.4.2"
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/code-frame/node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@babel/code-frame/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@babel/code-frame/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/@babel/code-frame/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-    },
-    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/@babel/code-frame/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/@babel/code-frame/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/compat-data": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
-      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz",
+      "integrity": "sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
-      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.3.tgz",
+      "integrity": "sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
+        "@babel/code-frame": "^7.24.2",
+        "@babel/generator": "^7.24.1",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.9",
-        "@babel/parser": "^7.23.9",
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/helpers": "^7.24.1",
+        "@babel/parser": "^7.24.1",
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.1",
+        "@babel/types": "^7.24.0",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -277,13 +213,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
+      "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
       "dependencies": {
-        "@babel/types": "^7.23.6",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
+        "@babel/types": "^7.24.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
       },
       "engines": {
@@ -358,11 +294,11 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
       "dependencies": {
-        "@babel/types": "^7.22.15"
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -409,9 +345,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -433,26 +369,27 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
-      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.1.tgz",
+      "integrity": "sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==",
       "dependencies": {
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.1",
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+      "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -523,9 +460,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
-      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
+      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -534,9 +471,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -545,31 +482,31 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
-      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/parser": "^7.24.0",
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
-      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz",
+      "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==",
       "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
+        "@babel/code-frame": "^7.24.1",
+        "@babel/generator": "^7.24.1",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/parser": "^7.24.1",
+        "@babel/types": "^7.24.0",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -578,9 +515,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
-      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -626,9 +563,9 @@
       "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
     },
     "node_modules/@emotion/is-prop-valid": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
-      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -639,9 +576,9 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "node_modules/@emotion/react": {
-      "version": "11.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz",
-      "integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==",
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.11.0",
@@ -1149,13 +1086,13 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
       "dependencies": {
-        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -1170,9 +1107,9 @@
       }
     },
     "node_modules/@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1183,9 +1120,9 @@
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.22",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
-      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1211,14 +1148,14 @@
       }
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-beta.36",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.36.tgz",
-      "integrity": "sha512-6A8fYiXgjqTO6pgj31Hc8wm1M3rFYCxDRh09dBVk0L0W4cb2lnurRJa3cAyic6hHY+we1S58OdGYRbKmOsDpGQ==",
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@floating-ui/react-dom": "^2.0.8",
-        "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.9",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
         "@popperjs/core": "^2.11.8",
         "clsx": "^2.1.0",
         "prop-types": "^15.8.1"
@@ -1250,25 +1187,25 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.15.10",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.10.tgz",
-      "integrity": "sha512-qPv7B+LeMatYuzRjB3hlZUHqinHx/fX4YFBiaS19oC02A1e9JFuDKDvlyRQQ5oRSbJJt0QlaLTlr0IcauVcJRQ==",
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.14.tgz",
+      "integrity": "sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.15.10",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.10.tgz",
-      "integrity": "sha512-YJJGHjwDOucecjDEV5l9ISTCo+l9YeWrho623UajzoHRYxuKUmwrGVYOW4PKwGvCx9SU9oklZnbbi2Clc5XZHw==",
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz",
+      "integrity": "sha512-kEbRw6fASdQ1SQ7LVdWR5OlWV3y7Y54ZxkLzd6LV5tmz+NpO3MJKZXSfgR0LHMP7meKsPiMm4AuzV0pXDpk/BQ==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/base": "5.0.0-beta.36",
-        "@mui/core-downloads-tracker": "^5.15.10",
-        "@mui/system": "^5.15.9",
-        "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.15.14",
+        "@mui/system": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
         "@types/react-transition-group": "^4.4.10",
         "clsx": "^2.1.0",
         "csstype": "^3.1.3",
@@ -1311,12 +1248,12 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.15.9",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.9.tgz",
-      "integrity": "sha512-/aMJlDOxOTAXyp4F2rIukW1O0anodAMCkv1DfBh/z9vaKHY3bd5fFf42wmP+0GRmwMinC5aWPpNfHXOED1fEtg==",
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
+      "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/utils": "^5.15.9",
+        "@mui/utils": "^5.15.14",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1337,9 +1274,9 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.15.9",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.9.tgz",
-      "integrity": "sha512-NRKtYkL5PZDH7dEmaLEIiipd3mxNnQSO+Yo8rFNBNptY8wzQnQ+VjayTq39qH7Sast5cwHKYFusUrQyD+SS4Og==",
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+      "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@emotion/cache": "^11.11.0",
@@ -1368,15 +1305,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.15.9",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.9.tgz",
-      "integrity": "sha512-SxkaaZ8jsnIJ77bBXttfG//LUf6nTfOcaOuIgItqfHv60ZCQy/Hu7moaob35kBb+guxVJnoSZ+7vQJrA/E7pKg==",
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.14.tgz",
+      "integrity": "sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
-        "@mui/private-theming": "^5.15.9",
-        "@mui/styled-engine": "^5.15.9",
-        "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.9",
+        "@mui/private-theming": "^5.15.14",
+        "@mui/styled-engine": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
         "clsx": "^2.1.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -1415,9 +1352,9 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.13",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz",
-      "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==",
+      "version": "7.2.14",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0"
       },
@@ -1428,9 +1365,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.15.9",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.9.tgz",
-      "integrity": "sha512-yDYfr61bCYUz1QtwvpqYy/3687Z8/nS4zv7lv/ih/6ZFGMl1iolEvxRmR84v2lOYxlds+kq1IVYbXxDKh8Z9sg==",
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
+      "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@types/prop-types": "^15.7.11",
@@ -1496,12 +1433,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.42.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.0.tgz",
-      "integrity": "sha512-2k1HzC28Fs+HiwbJOQDUwrWMttqSLUVdjCqitBOjdCD0svWOMQUVqrXX6iFD7POps6xXAojsX/dGBpKnjZctLA==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz",
+      "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.42.0"
+        "playwright": "1.42.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1520,20 +1457,20 @@
       }
     },
     "node_modules/@preact/signals-core": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.5.1.tgz",
-      "integrity": "sha512-dE6f+WCX5ZUDwXzUIWNMhhglmuLpqJhuy3X3xHrhZYI0Hm2LyQwOu0l9mdPiWrVNsE+Q7txOnJPgtIqHCYoBVA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.6.0.tgz",
+      "integrity": "sha512-O/XGxwP85h1F7+ouqTMOIZ3+V1whfaV9ToIVcuyGriD4JkSD00cQo54BKdqjvBJxbenvp7ynfqRHEwI6e+NIhw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
       }
     },
     "node_modules/@preact/signals-react": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.0.tgz",
-      "integrity": "sha512-tMVi2SXFXlojaiPNWa8dlYaidR/XvEgMSp+iymKJgMssBM/QVtUQrodKZek1BJju+dkVHiyeuQHmkuLOI9oyNw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.1.tgz",
+      "integrity": "sha512-QQoxAPiliH6oeZPF5OZHmyala5zyFya0ZCp/A0lR4y6R9wO4lT7GdtYg5UFlmKNWMcFN6PiAjNPMTiNFMmnCpw==",
       "dependencies": {
-        "@preact/signals-core": "^1.5.1",
+        "@preact/signals-core": "^1.6.0",
         "use-sync-external-store": "^1.2.0"
       },
       "funding": {
@@ -2763,9 +2700,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz",
-      "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -3082,9 +3019,9 @@
       }
     },
     "node_modules/@swc/core": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.2.tgz",
-      "integrity": "sha512-vWgY07R/eqj1/a0vsRKLI9o9klGZfpLNOVEnrv4nrccxBgYPjcf22IWwAoaBJ+wpA7Q4fVjCUM8lP0m01dpxcg==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.8.tgz",
+      "integrity": "sha512-uY2RSJcFPgNOEg12RQZL197LZX+MunGiKxsbxmh22VfVxrOYGRvh4mPANFlrD1yb38CgmW1wI6YgIi8LkIwmWg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -3099,16 +3036,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.4.2",
-        "@swc/core-darwin-x64": "1.4.2",
-        "@swc/core-linux-arm-gnueabihf": "1.4.2",
-        "@swc/core-linux-arm64-gnu": "1.4.2",
-        "@swc/core-linux-arm64-musl": "1.4.2",
-        "@swc/core-linux-x64-gnu": "1.4.2",
-        "@swc/core-linux-x64-musl": "1.4.2",
-        "@swc/core-win32-arm64-msvc": "1.4.2",
-        "@swc/core-win32-ia32-msvc": "1.4.2",
-        "@swc/core-win32-x64-msvc": "1.4.2"
+        "@swc/core-darwin-arm64": "1.4.8",
+        "@swc/core-darwin-x64": "1.4.8",
+        "@swc/core-linux-arm-gnueabihf": "1.4.8",
+        "@swc/core-linux-arm64-gnu": "1.4.8",
+        "@swc/core-linux-arm64-musl": "1.4.8",
+        "@swc/core-linux-x64-gnu": "1.4.8",
+        "@swc/core-linux-x64-musl": "1.4.8",
+        "@swc/core-win32-arm64-msvc": "1.4.8",
+        "@swc/core-win32-ia32-msvc": "1.4.8",
+        "@swc/core-win32-x64-msvc": "1.4.8"
       },
       "peerDependencies": {
         "@swc/helpers": "^0.5.0"
@@ -3120,9 +3057,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.2.tgz",
-      "integrity": "sha512-1uSdAn1MRK5C1m/TvLZ2RDvr0zLvochgrZ2xL+lRzugLlCTlSA+Q4TWtrZaOz+vnnFVliCpw7c7qu0JouhgQIw==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.8.tgz",
+      "integrity": "sha512-hhQCffRTgzpTIbngSnC30vV6IJVTI9FFBF954WEsshsecVoCGFiMwazBbrkLG+RwXENTrMhgeREEFh6R3KRgKQ==",
       "cpu": [
         "arm64"
       ],
@@ -3136,9 +3073,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.2.tgz",
-      "integrity": "sha512-TYD28+dCQKeuxxcy7gLJUCFLqrwDZnHtC2z7cdeGfZpbI2mbfppfTf2wUPzqZk3gEC96zHd4Yr37V3Tvzar+lQ==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.8.tgz",
+      "integrity": "sha512-P3ZBw8Jr8rKhY/J8d+6WqWriqngGTgHwtFeJ8MIakQJTbdYbFgXSZxcvDiERg3psbGeFXaUaPI0GO6BXv9k/OQ==",
       "cpu": [
         "x64"
       ],
@@ -3152,9 +3089,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.2.tgz",
-      "integrity": "sha512-Eyqipf7ZPGj0vplKHo8JUOoU1un2sg5PjJMpEesX0k+6HKE2T8pdyeyXODN0YTFqzndSa/J43EEPXm+rHAsLFQ==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.8.tgz",
+      "integrity": "sha512-PP9JIJt19bUWhAGcQW6qMwTjZOcMyzkvZa0/LWSlDm0ORYVLmDXUoeQbGD3e0Zju9UiZxyulnpjEN0ZihJgPTA==",
       "cpu": [
         "arm"
       ],
@@ -3168,9 +3105,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.2.tgz",
-      "integrity": "sha512-wZn02DH8VYPv3FC0ub4my52Rttsus/rFw+UUfzdb3tHMHXB66LqN+rR0ssIOZrH6K+VLN6qpTw9VizjyoH0BxA==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.8.tgz",
+      "integrity": "sha512-HvEWnwKHkoVUr5iftWirTApFJ13hGzhAY2CMw4lz9lur2m+zhPviRRED0FCI6T95Knpv7+8eUOr98Z7ctrG6DQ==",
       "cpu": [
         "arm64"
       ],
@@ -3184,9 +3121,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.2.tgz",
-      "integrity": "sha512-3G0D5z9hUj9bXNcwmA1eGiFTwe5rWkuL3DsoviTj73TKLpk7u64ND0XjEfO0huVv4vVu9H1jodrKb7nvln/dlw==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.8.tgz",
+      "integrity": "sha512-kY8+qa7k/dEeBq9p0Hrta18QnJPpsiJvDQSLNaTIFpdM3aEM9zbkshWz8gaX5VVGUEALowCBUWqmzO4VaqM+2w==",
       "cpu": [
         "arm64"
       ],
@@ -3200,9 +3137,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.2.tgz",
-      "integrity": "sha512-LFxn9U8cjmYHw3jrdPNqPAkBGglKE3tCZ8rA7hYyp0BFxuo7L2ZcEnPm4RFpmSCCsExFH+LEJWuMGgWERoktvg==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.8.tgz",
+      "integrity": "sha512-0WWyIw432wpO/zeGblwq4f2YWam4pn8Z/Ig4KzHMgthR/KmiLU3f0Z7eo45eVmq5vcU7Os1zi/Zb65OOt09q/w==",
       "cpu": [
         "x64"
       ],
@@ -3216,9 +3153,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.2.tgz",
-      "integrity": "sha512-dp0fAmreeVVYTUcb4u9njTPrYzKnbIH0EhH2qvC9GOYNNREUu2GezSIDgonjOXkHiTCvopG4xU7y56XtXj4VrQ==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.8.tgz",
+      "integrity": "sha512-p4yxvVS05rBNCrBaSTa20KK88vOwtg8ifTW7ec/yoab0bD5EwzzB8KbDmLLxE6uziFa0sdjF0dfRDwSZPex37Q==",
       "cpu": [
         "x64"
       ],
@@ -3232,9 +3169,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.2.tgz",
-      "integrity": "sha512-HlVIiLMQkzthAdqMslQhDkoXJ5+AOLUSTV6fm6shFKZKqc/9cJvr4S8UveNERL9zUficA36yM3bbfo36McwnvQ==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.8.tgz",
+      "integrity": "sha512-jKuXihxAaqUnbFfvPxtmxjdJfs87F1GdBf33il+VUmSyWCP4BE6vW+/ReDAe8sRNsKyrZ3UH1vI5q1n64csBUA==",
       "cpu": [
         "arm64"
       ],
@@ -3248,9 +3185,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.2.tgz",
-      "integrity": "sha512-WCF8faPGjCl4oIgugkp+kL9nl3nUATlzKXCEGFowMEmVVCFM0GsqlmGdPp1pjZoWc9tpYanoXQDnp5IvlDSLhA==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.8.tgz",
+      "integrity": "sha512-O0wT4AGHrX8aBeH6c2ADMHgagAJc5Kf6W48U5moyYDAkkVnKvtSc4kGhjWhe1Yl0sI0cpYh2In2FxvYsb44eWw==",
       "cpu": [
         "ia32"
       ],
@@ -3264,9 +3201,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.2.tgz",
-      "integrity": "sha512-oV71rwiSpA5xre2C5570BhCsg1HF97SNLsZ/12xv7zayGzqr3yvFALFJN8tHKpqUdCB4FGPjoP3JFdV3i+1wUw==",
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.8.tgz",
+      "integrity": "sha512-C2AYc3A2o+ECciqsJWRgIpp83Vk5EaRzHe7ed/xOWzVd0MsWR+fweEsyOjlmzHfpUxJSi46Ak3/BIZJlhZbXbg==",
       "cpu": [
         "x64"
       ],
@@ -3286,10 +3223,13 @@
       "dev": true
     },
     "node_modules/@swc/types": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
-      "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
-      "dev": true
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.6.tgz",
+      "integrity": "sha512-/JLo/l2JsT/LRd80C3HfbmVpxOAJ11FO2RCEslFrgzLltoP9j8XIbsyDcfCt2WWyX+CM96rBoNM+IToAkFOugg==",
+      "dev": true,
+      "dependencies": {
+        "@swc/counter": "^0.1.3"
+      }
     },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
@@ -3363,11 +3303,11 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.1.2.tgz",
-      "integrity": "sha512-qibmxtctgOZo2I+3Rw5GR9kXgaa15U5r3/idDY1ItUKW15UK7GhCfyIfE6qYuJ1fxQF6dJDsD8SbpPyuJgpxuA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
+      "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.1.2"
+        "@tanstack/virtual-core": "3.2.0"
       },
       "funding": {
         "type": "github",
@@ -3379,9 +3319,9 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.2.tgz",
-      "integrity": "sha512-DATZJs8iejkIUqXZe6ruDAnjFo78BKnIIgqQZrc7CmEFqfLEN/TPD91n4hRfo6hpRB6xC00bwKxv7vdjFNEmOg==",
+      "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==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
@@ -3698,9 +3638,9 @@
       }
     },
     "node_modules/@types/d3-hierarchy": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.6.tgz",
-      "integrity": "sha512-qlmD/8aMk5xGorUvTUWHCiumvgaUXYldYjNVOWtYoTYY/L+WwIEAmJxUmTgr9LoGNG0PPAOmqMDJVDPc7DOpPw=="
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg=="
     },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
@@ -3854,9 +3794,9 @@
       }
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.202",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
-      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
+      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
       "dev": true
     },
     "node_modules/@types/mathjax": {
@@ -3878,9 +3818,9 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "node_modules/@types/node": {
-      "version": "16.18.82",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.82.tgz",
-      "integrity": "sha512-pcDZtkx9z8XYV+ius2P3Ot2VVrcYOfXffBQUBuiszrlUzKSmoDYqo+mV+IoL8iIiIjjtOMvNSmH1hwJ+Q+f96Q==",
+      "version": "16.18.91",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.91.tgz",
+      "integrity": "sha512-h8Q4klc8xzc9kJKr7UYNtJde5TU2qEePVyH3WyzJaUC+3ptyc5kPQbWOIUcn8ZsG5+KSkq+P0py0kC0VqxgAXw==",
       "devOptional": true
     },
     "node_modules/@types/parse-json": {
@@ -3894,9 +3834,9 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.57",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.57.tgz",
-      "integrity": "sha512-ZvQsktJgSYrQiMirAN60y4O/LRevIV8hUzSOSNB6gfR3/o3wCBFQx3sPwIYtuDMeiVgsSS3UzCV26tEzgnfvQw==",
+      "version": "18.2.67",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.67.tgz",
+      "integrity": "sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -3904,9 +3844,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.19",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
-      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "version": "18.2.22",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
+      "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
       "devOptional": true,
       "dependencies": {
         "@types/react": "*"
@@ -3978,9 +3918,9 @@
       "integrity": "sha512-jbQfFaw+57OBwPt7qSNHuW+RA8smmRwkWRS1Ozh6K/QxUspBgBV/LpdSzlY7vee8TomS6j3D33B9rIeH1qMwsA=="
     },
     "node_modules/ace-builds": {
-      "version": "1.32.6",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.32.6.tgz",
-      "integrity": "sha512-dO5BnyDOhCnznhOpILzXq4jqkbhRXxNkf3BuVTmyxGyRLrhddfdyk6xXgy+7A8LENrcYoFi/sIxMuH3qjNUN4w=="
+      "version": "1.32.7",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.32.7.tgz",
+      "integrity": "sha512-ziv35kaYELFw4suWlotz/Xsl1/1LhWAbwFoD3zIgCgP9gXGECEsAM4GhiB0T0xZdmQjyv6hmAzO280g0+n4vGw=="
     },
     "node_modules/acorn": {
       "version": "8.11.3",
@@ -4125,9 +4065,9 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-hidden": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
-      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -4174,9 +4114,9 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.17",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
-      "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==",
+      "version": "10.4.18",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
+      "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
       "dev": true,
       "funding": [
         {
@@ -4193,8 +4133,8 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.22.2",
-        "caniuse-lite": "^1.0.30001578",
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001591",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -4226,11 +4166,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
-      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
       "dependencies": {
-        "follow-redirects": "^1.15.4",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -4447,11 +4387,14 @@
       }
     },
     "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/bl": {
@@ -4626,9 +4569,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001588",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
-      "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
+      "version": "1.0.30001599",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz",
+      "integrity": "sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==",
       "funding": [
         {
           "type": "opencollective",
@@ -5071,9 +5014,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.7.2.tgz",
-      "integrity": "sha512-9UCss12Zmyk/22u+JbkVrHHxOzFOyY17HuqP5LeswI4hclbj6qbjJTovdj2zRy8cCH6/n6Wh0lTLjriGnyGh0g==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.7.3.tgz",
+      "integrity": "sha512-R8jUpBMAUm4rSyxzGa9QqFdJTkzREtb1QahXdDoOfElGiF4VbSuu5bfqQoOro1kkSagPy+aTKu5WtSSXmH3u3g==",
       "dev": true,
       "dependencies": {
         "css-selector-tokenizer": "^0.8",
@@ -5346,9 +5289,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.9.tgz",
-      "integrity": "sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ=="
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.10.tgz",
+      "integrity": "sha512-WZDL8ZHTliEVP3Lk4phtvjg8SNQ3YMc5WVstxE8cszKZrFjzI4PF4ZTIk9VGAc9vZADO7uGO2V/ZiStcRSAT4Q=="
     },
     "node_modules/dot-case": {
       "version": "3.0.4",
@@ -5365,9 +5308,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.679",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.679.tgz",
-      "integrity": "sha512-NhQMsz5k0d6m9z3qAxnsOR/ebal4NAGsrNVRwcDo4Kc/zQ7KdsTKZUxZoygHcVRb0QDW3waEDIcE3isZ79RP6g=="
+      "version": "1.4.711",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.711.tgz",
+      "integrity": "sha512-hRg81qzvUEibX2lDxnFlVCHACa+LtrCPIsWAxo161LDYIB3jauf57RGsMZV9mvGwE98yGH06icj3zBEoOkxd/w=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -5784,9 +5727,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -5937,20 +5880,21 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.0.6",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.6.tgz",
-      "integrity": "sha512-BpO3mWF8UwxzO3Ca5AmSkrg14QYTeJa9vKgoLOoBdBdTPj0e81i1dMwnX6EQJXRieUx20uiDBXq8bA6y7N6b8Q==",
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.18.tgz",
+      "integrity": "sha512-TPKJ1KqQzTQ//cGFAb/jrpbbNY8UVh2q69vAcVRA8AxsKYkl5nrW1nsmrHRc5dLsRdwlXSV1kuo1Khylhph7kw==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
       "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
       },
       "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
         "react": {
           "optional": true
         },
@@ -5959,21 +5903,6 @@
         }
       }
     },
-    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "optional": true,
-      "dependencies": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "node_modules/framer-motion/node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true
-    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -6213,9 +6142,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
-      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -6751,10 +6680,13 @@
       }
     },
     "node_modules/is-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6813,10 +6745,13 @@
       }
     },
     "node_modules/is-set": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6887,22 +6822,28 @@
       }
     },
     "node_modules/is-weakmap": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-weakset": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
-      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
+      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8400,13 +8341,13 @@
       }
     },
     "node_modules/object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8736,11 +8677,11 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.42.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.0.tgz",
-      "integrity": "sha512-Ko7YRUgj5xBHbntrgt4EIw/nE//XBHOKVKnBjO1KuZkmkhlbgyggTe5s9hjqQ1LpN+Xg+kHsQyt5Pa0Bw5XpvQ==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz",
+      "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==",
       "dependencies": {
-        "playwright-core": "1.42.0"
+        "playwright-core": "1.42.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8753,9 +8694,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.42.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.0.tgz",
-      "integrity": "sha512-0HD9y8qEVlcbsAjdpBaFjmaTHf+1FeIddy8VJLeiqwhcNqGCBe4Wp2e8knpqiYbzxtxarxiXyNDw2cG8sCaNMQ==",
+      "version": "1.42.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz",
+      "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==",
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -8773,9 +8714,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.4.37",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.37.tgz",
+      "integrity": "sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -8793,7 +8734,7 @@
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -8879,9 +8820,12 @@
       }
     },
     "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
-      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
+      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
       "engines": {
         "node": ">= 14"
       }
@@ -8905,9 +8849,9 @@
       }
     },
     "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-      "version": "6.0.15",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
-      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -9408,9 +9352,9 @@
       }
     },
     "node_modules/react-error-boundary": {
-      "version": "4.0.12",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.12.tgz",
-      "integrity": "sha512-kJdxdEYlb7CPC1A0SeUY38cHpjuu6UkvzKiAmqmOFL21VRfMhOcWxTCBgLVCO0VEMh9JhFNcVaXlV4/BTpiwOA==",
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
@@ -9498,9 +9442,9 @@
       }
     },
     "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.5.tgz",
-      "integrity": "sha512-3cqjOqg6s0XbOjWvmasmqHch+RLxIEk2r/70rzGXuz3iIGQsQheEQyqYCBb5EECoD01Vo2SIbDqW4paLeLTASw==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
       "dependencies": {
         "react-style-singleton": "^2.2.1",
         "tslib": "^2.0.0"
@@ -9519,11 +9463,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz",
-      "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.1"
+        "@remix-run/router": "1.15.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -9533,12 +9477,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz",
-      "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==",
+      "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==",
       "dependencies": {
-        "@remix-run/router": "1.15.1",
-        "react-router": "6.22.1"
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -10073,17 +10017,17 @@
       "dev": true
     },
     "node_modules/set-function-length": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
-      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "dependencies": {
-        "define-data-property": "^1.1.2",
+        "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.3",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.1"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10272,9 +10216,9 @@
       }
     },
     "node_modules/shadcn-ui/node_modules/npm-run-path": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
-      "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
       "dependencies": {
         "path-key": "^4.0.0"
       },
@@ -10393,12 +10337,12 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
-      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.4",
         "object-inspect": "^1.13.1"
@@ -10487,9 +10431,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10891,9 +10835,9 @@
       }
     },
     "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-      "version": "6.0.15",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
-      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -11070,9 +11014,9 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -11283,9 +11227,9 @@
       }
     },
     "node_modules/use-callback-ref": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz",
-      "integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -11943,31 +11887,34 @@
       }
     },
     "node_modules/which-collection": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
-      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
       "dependencies": {
-        "is-map": "^2.0.1",
-        "is-set": "^2.0.1",
-        "is-weakmap": "^2.0.1",
-        "is-weakset": "^2.0.1"
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.14.tgz",
-      "integrity": "sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.6",
-        "call-bind": "^1.0.5",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.1"
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -12135,9 +12082,9 @@
       }
     },
     "node_modules/zustand": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.1.tgz",
-      "integrity": "sha512-XlauQmH64xXSC1qGYNv00ODaQ3B+tNPoy22jv2diYiP4eoDKr9LA+Bh5Bc3gplTrFdb6JVI+N4kc1DZ/tbtfPg==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
       "dependencies": {
         "use-sync-external-store": "1.2.0"
       },
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index a0fda55fd9..87777ca790 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -2,11 +2,15 @@ import { cloneDeep } from "lodash";
 import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import DictComponent from "../../../../components/dictComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import FloatComponent from "../../../../components/floatComponent";
-import IconComponent from "../../../../components/genericIconComponent";
+import {
+  default as ForwardedIconComponent,
+  default as IconComponent,
+} from "../../../../components/genericIconComponent";
 import InputComponent from "../../../../components/inputComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
 import InputListComponent from "../../../../components/inputListComponent";
@@ -24,7 +28,8 @@ import {
   OUTPUT_HANDLER_HOVER,
   TOOLTIP_EMPTY,
 } from "../../../../constants/constants";
-import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
+import { deleteGlobalVariable } from "../../../../controllers/API";
+import DeleteConfirmationModal from "../../../../modals/DeleteConfirmationModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
@@ -77,7 +82,36 @@ export default function ParameterComponent({
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
   );
-  const setNoticeData = useAlertStore((state) => state.setNoticeData);
+
+  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
+  const removeGlobalVariable = useGlobalVariablesStore(
+    (state) => state.removeGlobalVariable
+  );
+  function handleDelete(key: string) {
+    const id = getVariableId(key);
+    if (id !== undefined) {
+      deleteGlobalVariable(id).then((_) => {
+        removeGlobalVariable(key);
+        if (
+          data?.node?.template[name].value === key &&
+          data?.node?.template[name].load_from_db
+        ) {
+          handleOnNewValue("");
+          setNode(data.id, (oldNode) => {
+            let newNode = cloneDeep(oldNode);
+            newNode.data = {
+              ...newNode.data,
+            };
+            newNode.data.node.template[name].load_from_db = false;
+            return newNode;
+          });
+        }
+      });
+    } else {
+      console.error("id is undefined");
+    }
+  }
+
   const [isLoading, setIsLoading] = useState(false);
   const flow = currentFlow?.data?.nodes ?? null;
 
@@ -552,7 +586,7 @@ export default function ParameterComponent({
                     optionsIcon="Globe"
                     optionsButton={
                       <AddNewVariableButton>
-                        <CommandItem value={"new"}>
+                        <CommandItem>
                           <IconComponent
                             name="Plus"
                             className={cn("mr-2 h-4 w-4 text-primary")}
@@ -562,6 +596,32 @@ export default function ParameterComponent({
                         </CommandItem>
                       </AddNewVariableButton>
                     }
+                    optionButton={(option) => (
+                      <DeleteConfirmationModal
+                        onConfirm={(e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          handleDelete(option);
+                        }}
+                        description={'variable "' + option + '"'}
+                        asChild
+                      >
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                          className="pr-1"
+                        >
+                          <ForwardedIconComponent
+                            name="Trash2"
+                            className={cn(
+                              "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100"
+                            )}
+                            aria-hidden="true"
+                          />
+                        </button>
+                      </DeleteConfirmationModal>
+                    )}
                     selectedOption={
                       data?.node?.template[name].load_from_db ?? false
                         ? data?.node?.template[name].value
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 6c3d95f369..8cb5080d11 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -36,6 +36,7 @@ export default function InputComponent({
   options = [],
   optionsPlaceholder = "Search options...",
   optionsButton,
+  optionButton,
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
@@ -89,7 +90,7 @@ export default function InputComponent({
         </Form.Control>
       ) : (
         <>
-          <Popover open={showOptions} onOpenChange={setShowOptions}>
+          <Popover modal open={showOptions} onOpenChange={setShowOptions}>
             <PopoverAnchor>
               <Input
                 id={id}
@@ -142,7 +143,8 @@ export default function InputComponent({
                   <CommandGroup defaultChecked={false}>
                     {options.map((option, id) => (
                       <CommandItem
-                        key={id}
+                        className="group"
+                        key={option + id}
                         value={option}
                         onSelect={(currentValue) => {
                           setSelectedOption &&
@@ -154,17 +156,22 @@ export default function InputComponent({
                           setShowOptions(false);
                         }}
                       >
-                        <ForwardedIconComponent
-                          name="Check"
-                          className={cn(
-                            "mr-2 h-4 w-4 text-primary",
-                            selectedOption === option
-                              ? "opacity-100"
-                              : "opacity-0"
-                          )}
-                          aria-hidden="true"
-                        />
-                        {option}
+                        <div className="flex w-full items-center justify-between">
+                          <div className="flex items-center">
+                            <ForwardedIconComponent
+                              name="Check"
+                              className={cn(
+                                "mr-2 h-4 w-4 text-primary",
+                                selectedOption === option
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                              aria-hidden="true"
+                            />
+                            {option}
+                          </div>
+                          {optionButton && optionButton(option)}
+                        </div>
                       </CommandItem>
                     ))}
                     {optionsButton && optionsButton}
diff --git a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx b/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
index b2087f40d3..3621e27cf7 100644
--- a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
@@ -14,14 +14,18 @@ export default function DeleteConfirmationModal({
   children,
   onConfirm,
   description,
+  asChild,
 }: {
   children: JSX.Element;
-  onConfirm: () => void;
+  onConfirm: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   description?: string;
+  asChild?: boolean;
 }) {
   return (
     <Dialog>
-      <DialogTrigger tabIndex={-1}>{children}</DialogTrigger>
+      <DialogTrigger asChild={asChild} tabIndex={-1}>
+        {children}
+      </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
@@ -39,16 +43,21 @@ export default function DeleteConfirmationModal({
           Note: This action is irreversible.
         </span>
         <DialogFooter>
-          <DialogClose>
-            <Button className="mr-3" variant="outline">
+          <DialogClose asChild>
+            <Button
+              onClick={(e) => e.stopPropagation()}
+              className="mr-3"
+              variant="outline"
+            >
               Cancel
             </Button>
-
+          </DialogClose>
+          <DialogClose asChild>
             <Button
               type="submit"
               variant="destructive"
-              onClick={() => {
-                onConfirm();
+              onClick={(e) => {
+                onConfirm(e);
               }}
             >
               Delete
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 7290b49a59..3cb1b87802 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -24,6 +24,7 @@ export type InputComponentType = {
   optionsPlaceholder?: string;
   options?: string[];
   optionsButton?: ReactElement;
+  optionButton?: (option: string) => ReactElement;
   selectedOption?: string;
   setSelectedOption?: (value: string) => void;
 };

From ca460443d17b87711068395d3c2dbd2715d52520 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 21 Mar 2024 15:30:58 +0100
Subject: [PATCH 40/83] Fixed position on command when filtering

---
 .../GenericNode/components/parameterComponent/index.tsx  | 5 +++--
 src/frontend/src/components/inputComponent/index.tsx     | 9 +++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 87777ca790..f8faab81ce 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -586,13 +586,14 @@ export default function ParameterComponent({
                     optionsIcon="Globe"
                     optionsButton={
                       <AddNewVariableButton>
-                        <CommandItem>
+                        <CommandItem value="doNotFilter-addNewVariable">
                           <IconComponent
                             name="Plus"
                             className={cn("mr-2 h-4 w-4 text-primary")}
                             aria-hidden="true"
                           />
-                          Add New Variable
+                          <span>Add New Variable</span>
+                          
                         </CommandItem>
                       </AddNewVariableButton>
                     }
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 8cb5080d11..a0581eab3f 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -136,10 +136,15 @@ export default function InputComponent({
               side="bottom"
               align="center"
             >
-              <Command>
+              <Command
+                filter={(value, search) => {
+                  if (value.includes(search) || value.includes("doNotFilter-"))
+                    return 1; // ensures items arent filtered
+                  return 0;
+                }}
+              >
                 <CommandInput placeholder={optionsPlaceholder} />
                 <CommandList>
-                  <CommandEmpty>No results found.</CommandEmpty>
                   <CommandGroup defaultChecked={false}>
                     {options.map((option, id) => (
                       <CommandItem

From ba9124cc4e3ad7b711d6420fe235affc399fd035 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 21 Mar 2024 15:31:09 +0100
Subject: [PATCH 41/83] Formatting

---
 .../GenericNode/components/parameterComponent/index.tsx          | 1 -
 src/frontend/src/components/inputComponent/index.tsx             | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index f8faab81ce..5aa8dfa745 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -593,7 +593,6 @@ export default function ParameterComponent({
                             aria-hidden="true"
                           />
                           <span>Add New Variable</span>
-                          
                         </CommandItem>
                       </AddNewVariableButton>
                     }
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index a0581eab3f..f254de8d42 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -7,7 +7,6 @@ import { classNames, cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import {
   Command,
-  CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,

From 1604680ab9ffa047cd24bd9b76d9db843a7c4958 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 21 Mar 2024 15:35:58 +0100
Subject: [PATCH 42/83] Formatting

---
 .../src/components/inputComponent/index.tsx   | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 253aae5bec..e7ad0a1233 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -121,23 +121,25 @@ export default function InputComponent({
                 )}
                 placeholder={password && editNode ? "Key" : placeholder}
                 onChange={(e) => {
-            // if the user copies a password from another input
-            // it might come as ••••••••••• it causes errors
-            // in ascii encoding, so we need to handle it
-            if (password) {
-              // check if all chars are •
-              if (e.target.value.split("").every((char) => char === "•")) {
-                setErrorData({
-                  title: `Invalid characters: ${e.target.value}`,
-                  list: [
-                    "It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
-                  ],
-                });
-              }
+                  // if the user copies a password from another input
+                  // it might come as ••••••••••• it causes errors
+                  // in ascii encoding, so we need to handle it
+                  if (password) {
+                    // check if all chars are •
+                    if (
+                      e.target.value.split("").every((char) => char === "•")
+                    ) {
+                      setErrorData({
+                        title: `Invalid characters: ${e.target.value}`,
+                        list: [
+                          "It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
+                        ],
+                      });
+                    }
 
                     onChange && onChange(e.target.value);
                   }
-          }}
+                }}
                 onKeyDown={(e) => {
                   handleKeyDown(e, value, "");
                   if (blurOnEnter && e.key === "Enter")

From 178db4b95f0cdd0705cc180bec1ba25be7c0ff62 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 21 Mar 2024 17:26:28 +0100
Subject: [PATCH 43/83] Fix merge bug

---
 src/frontend/src/components/inputComponent/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index e7ad0a1233..1f7e633b4d 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -136,9 +136,8 @@ export default function InputComponent({
                         ],
                       });
                     }
-
-                    onChange && onChange(e.target.value);
                   }
+                  onChange && onChange(e.target.value);
                 }}
                 onKeyDown={(e) => {
                   handleKeyDown(e, value, "");

From 3b7cae829ced943dafc4ab6000d17b48fbc6dd1a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 21 Mar 2024 13:58:26 -0300
Subject: [PATCH 44/83] Update delete_credential function to return status code
 204

---
 src/backend/langflow/api/v1/credential.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/backend/langflow/api/v1/credential.py b/src/backend/langflow/api/v1/credential.py
index ff53d5e1ad..836a2629e2 100644
--- a/src/backend/langflow/api/v1/credential.py
+++ b/src/backend/langflow/api/v1/credential.py
@@ -98,7 +98,7 @@ def update_credential(
         raise HTTPException(status_code=500, detail=str(e)) from e
 
 
-@router.delete("/{credential_id}", response_model=CredentialRead, status_code=200)
+@router.delete("/{credential_id}", status_code=204)
 def delete_credential(
     *,
     session: Session = Depends(get_session),
@@ -114,6 +114,5 @@ def delete_credential(
             raise HTTPException(status_code=404, detail="Credential not found")
         session.delete(db_credential)
         session.commit()
-        return db_credential
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e)) from e

From 69735b070faa52aa9fcf758c2110c4cdcff8e026 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 21 Mar 2024 14:01:05 -0300
Subject: [PATCH 45/83] Refactor addNewVariableButtonComponent and API
 registerGlobalVariable

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

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 84e7d1c7ae..2173903bd2 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -1,13 +1,13 @@
 import { useState } from "react";
+import { registerGlobalVariable } from "../../controllers/API";
+import BaseModal from "../../modals/baseModal";
+import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
-import { registerGlobalVariable } from "../../controllers/API";
-import BaseModal from "../../modals/baseModal";
-import { useGlobalVariablesStore } from "../../stores/globalVariables";
 
 //TODO IMPLEMENT FORM LOGIC
 
@@ -25,8 +25,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
       value,
     };
     if (provider) data = { ...data, provider };
-    registerGlobalVariable(data).then((_) => {
-      addGlobalVariable(key, value, provider);
+    registerGlobalVariable(data).then((res) => {
+      const { name, id, provider } = res.data;
+      addGlobalVariable(name, id, provider);
       setKey("");
       setValue("");
       setProvider("");
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 0a987272bd..93931f0869 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -880,7 +880,7 @@ export async function registerGlobalVariable({
   name: string;
   value: string;
   provider?: string;
-}) {
+}): Promise<AxiosResponse<{ name: string; id: string; provider: string }>> {
   return await api.post(`${BASE_URL_API}credentials/`, {
     name,
     value,

From 7f34516a520dba6a20b1bfa11237c5f45e2c39f1 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 21 Mar 2024 14:02:08 -0300
Subject: [PATCH 46/83] Change key to name

---
 src/frontend/src/stores/globalVariables.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index 5e9adeecbf..e3b8cc7344 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -11,24 +11,24 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(variables),
       });
     },
-    addGlobalVariable: (key, id, provider) => {
+    addGlobalVariable: (name, id, provider) => {
       const data = { id, provider };
-      const newVariables = { ...get().globalVariables, [key]: data };
+      const newVariables = { ...get().globalVariables, [name]: data };
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
       });
     },
-    removeGlobalVariable: (key) => {
+    removeGlobalVariable: (name) => {
       const newVariables = { ...get().globalVariables };
-      delete newVariables[key];
+      delete newVariables[name];
       set({
         globalVariables: newVariables,
         globalVariablesEntries: Object.keys(newVariables),
       });
     },
-    getVariableId: (key) => {
-      return get().globalVariables[key]?.id;
-    }
+    getVariableId: (name) => {
+      return get().globalVariables[name]?.id;
+    },
   })
 );

From fbe346ccee7c5cd4e6fbed61e7702236fcfd6a00 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 21 Mar 2024 14:02:37 -0300
Subject: [PATCH 47/83] Refactor globalVariables key names in
 GlobalVariablesStore

---
 .../src/types/zustand/globalVariables/index.ts         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/types/zustand/globalVariables/index.ts b/src/frontend/src/types/zustand/globalVariables/index.ts
index 3e7f01e848..e50e85ba42 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: { [key: string]: { id: string; provider?: string } };
+  globalVariables: { [name: string]: { id: string; provider?: string } };
   setGlobalVariables: (variables: {
-    [key: string]: { id: string; provider?: string };
+    [name: string]: { id: string; provider?: string };
   }) => void;
-  addGlobalVariable: (key: string, id: string, provider?: string) => void;
-  removeGlobalVariable: (key: string) => void;
-  getVariableId: (key: string) => string | undefined;
+  addGlobalVariable: (name: string, id: string, provider?: string) => void;
+  removeGlobalVariable: (name: string) => void;
+  getVariableId: (name: string) => string | undefined;
 };

From df621707f7c045237dd2a17d47f0a1a0b9fdf858 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 22 Mar 2024 16:18:11 +0100
Subject: [PATCH 48/83] Implemented error alerts and function to clean deleted
 global variables

---
 .../components/parameterComponent/index.tsx   | 69 ++++++++++++++-----
 .../addNewVariableButton.tsx                  | 27 +++++---
 src/frontend/src/types/api/index.ts           |  3 +
 3 files changed, 73 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 5aa8dfa745..1dbe0308a5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -35,7 +35,11 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 import { useTypesStore } from "../../../../stores/typesStore";
-import { APIClassType, ResponseErrorTypeAPI } from "../../../../types/api";
+import {
+  APIClassType,
+  ResponseErrorDetailAPI,
+  ResponseErrorTypeAPI,
+} from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
 import {
   handleUpdateValues,
@@ -90,25 +94,36 @@ export default function ParameterComponent({
   function handleDelete(key: string) {
     const id = getVariableId(key);
     if (id !== undefined) {
-      deleteGlobalVariable(id).then((_) => {
-        removeGlobalVariable(key);
-        if (
-          data?.node?.template[name].value === key &&
-          data?.node?.template[name].load_from_db
-        ) {
-          handleOnNewValue("");
-          setNode(data.id, (oldNode) => {
-            let newNode = cloneDeep(oldNode);
-            newNode.data = {
-              ...newNode.data,
-            };
-            newNode.data.node.template[name].load_from_db = false;
-            return newNode;
+      deleteGlobalVariable(id)
+        .then((_) => {
+          removeGlobalVariable(key);
+          if (
+            data?.node?.template[name].value === key &&
+            data?.node?.template[name].load_from_db
+          ) {
+            handleOnNewValue("");
+            setNode(data.id, (oldNode) => {
+              let newNode = cloneDeep(oldNode);
+              newNode.data = {
+                ...newNode.data,
+              };
+              newNode.data.node.template[name].load_from_db = false;
+              return newNode;
+            });
+          }
+        })
+        .catch((error) => {
+          let responseError = error as ResponseErrorDetailAPI;
+          setErrorData({
+            title: "Error deleting variable",
+            list: [responseError.response.data.detail ?? "Unknown error"],
           });
-        }
-      });
+        });
     } else {
-      console.error("id is undefined");
+      setErrorData({
+        title: "Error deleting variable",
+        list: [cn("ID not found for variable: ", key)],
+      });
     }
   }
 
@@ -154,6 +169,24 @@ export default function ParameterComponent({
     renderTooltips();
   };
 
+  useEffect(() => {
+    if (data.node?.template[name])
+      if (
+        !globalVariablesEntries.includes(data.node?.template[name].value) &&
+        data.node?.template[name].load_from_db
+      ) {
+        handleOnNewValue("");
+        setNode(data.id, (oldNode) => {
+          let newNode = cloneDeep(oldNode);
+          newNode.data = {
+            ...newNode.data,
+          };
+          newNode.data.node.template[name].load_from_db = false;
+          return newNode;
+        });
+      }
+  }, [globalVariablesEntries]);
+
   useEffect(() => {
     async function fetchData() {
       if (
diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 2173903bd2..611ba71dd9 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -1,7 +1,9 @@
 import { useState } from "react";
 import { registerGlobalVariable } from "../../controllers/API";
 import BaseModal from "../../modals/baseModal";
+import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
+import { ResponseErrorDetailAPI, ResponseErrorTypeAPI } from "../../types/api";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { Button } from "../ui/button";
@@ -16,6 +18,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const [value, setValue] = useState("");
   const [provider, setProvider] = useState("");
   const [open, setOpen] = useState(false);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
@@ -25,14 +28,22 @@ export default function AddNewVariableButton({ children }): JSX.Element {
       value,
     };
     if (provider) data = { ...data, provider };
-    registerGlobalVariable(data).then((res) => {
-      const { name, id, provider } = res.data;
-      addGlobalVariable(name, id, provider);
-      setKey("");
-      setValue("");
-      setProvider("");
-      setOpen(false);
-    });
+    registerGlobalVariable(data)
+      .then((res) => {
+        const { name, id, provider } = res.data;
+        addGlobalVariable(name, id, provider);
+        setKey("");
+        setValue("");
+        setProvider("");
+        setOpen(false);
+      })
+      .catch((error) => {
+        let responseError = error as ResponseErrorDetailAPI;
+        setErrorData({
+          title: "Error creating variable",
+          list: [responseError.response.data.detail ?? "Unknown error"],
+        });
+      });
   }
   return (
     <BaseModal open={open} setOpen={setOpen} size="x-small">
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 297984d281..cfbd64989b 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -176,3 +176,6 @@ export type CodeErrorDataTypeAPI = {
 export type ResponseErrorTypeAPI = {
   response: { data: { detail: CodeErrorDataTypeAPI } };
 };
+export type ResponseErrorDetailAPI = {
+  response: { data: { detail: string } };
+};

From ad8e016ab835afe275787e045e6775c398eea9ed Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 22 Mar 2024 16:19:46 +0100
Subject: [PATCH 49/83] Fixed error message appearing when deleting field

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

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 1f7e633b4d..2b8c9c0e38 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -127,7 +127,7 @@ export default function InputComponent({
                   if (password) {
                     // check if all chars are •
                     if (
-                      e.target.value.split("").every((char) => char === "•")
+                      e.target.value.split("").every((char) => char === "•") && e.target.value !== ""
                     ) {
                       setErrorData({
                         title: `Invalid characters: ${e.target.value}`,

From cded4aae71b569a795a0563b288be56bb903e634 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 22 Mar 2024 12:29:47 -0300
Subject: [PATCH 50/83] Refactor build_template_config method to use
 eval_custom_component_code

---
 .../custom/custom_component/component.py      | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/backend/langflow/interface/custom/custom_component/component.py b/src/backend/langflow/interface/custom/custom_component/component.py
index 594ec982f1..ca92135908 100644
--- a/src/backend/langflow/interface/custom/custom_component/component.py
+++ b/src/backend/langflow/interface/custom/custom_component/component.py
@@ -1,4 +1,3 @@
-import ast
 import operator
 import warnings
 from typing import Any, ClassVar, Optional
@@ -6,7 +5,9 @@
 from cachetools import TTLCache, cachedmethod
 from fastapi import HTTPException
 
+from langflow.interface.custom.attributes import ATTR_FUNC_MAPPING
 from langflow.interface.custom.code_parser import CodeParser
+from langflow.interface.custom.eval import eval_custom_component_code
 from langflow.utils import validate
 
 
@@ -63,26 +64,25 @@ def get_function(self):
 
         return validate.create_function(self.code, self._function_entrypoint_name)
 
-    def build_template_config(self, attributes) -> dict:
-        template_config = {}
-
-        for item in attributes:
-            item_name = item.get("name")
-
-            if item_value := item.get("value"):
-                if "display_name" in item_name:
-                    template_config["display_name"] = ast.literal_eval(item_value)
+    def build_template_config(self) -> dict:
+        """
+        Builds the template configuration for the custom component.
 
-                elif "description" in item_name:
-                    template_config["description"] = ast.literal_eval(item_value)
-
-                elif "beta" in item_name:
-                    template_config["beta"] = ast.literal_eval(item_value)
+        Returns:
+            A dictionary representing the template configuration.
+        """
+        if not self.code:
+            return {}
 
-                elif "documentation" in item_name:
-                    template_config["documentation"] = ast.literal_eval(item_value)
+        cc_class = eval_custom_component_code(self.code)
+        component_instance = cc_class()
+        template_config = {}
 
-        return template_config
+        for attribute, func in ATTR_FUNC_MAPPING.items():
+            if hasattr(component_instance, attribute):
+                value = getattr(component_instance, attribute)
+                if value is not None:
+                    template_config[attribute] = func(value=value)
 
     def build(self, *args: Any, **kwargs: Any) -> Any:
         raise NotImplementedError

From 002da172cc8ced8855222a188e7273d52e365bd6 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 22 Mar 2024 12:39:57 -0300
Subject: [PATCH 51/83] Remove unecessary method

---
 .../custom_component/custom_component.py      | 42 +++----------------
 1 file changed, 5 insertions(+), 37 deletions(-)

diff --git a/src/backend/langflow/interface/custom/custom_component/custom_component.py b/src/backend/langflow/interface/custom/custom_component/custom_component.py
index cfb2f41f38..715aa72f3d 100644
--- a/src/backend/langflow/interface/custom/custom_component/custom_component.py
+++ b/src/backend/langflow/interface/custom/custom_component/custom_component.py
@@ -1,20 +1,14 @@
 import operator
 from pathlib import Path
-from typing import (
-    TYPE_CHECKING,
-    Any,
-    Callable,
-    ClassVar,
-    List,
-    Optional,
-    Sequence,
-    Union,
-)
+from typing import TYPE_CHECKING, Any, Callable, ClassVar, List, Optional, Sequence, Union
 from uuid import UUID
 
 import yaml
 from cachetools import TTLCache, cachedmethod
 from langchain_core.documents import Document
+from pydantic import BaseModel
+from sqlmodel import select
+
 from langflow.interface.custom.code_parser.utils import (
     extract_inner_type_from_generic_alias,
     extract_union_types_from_generic_alias,
@@ -24,15 +18,9 @@
 from langflow.schema.dotdict import dotdict
 from langflow.services.database.models.flow import Flow
 from langflow.services.database.utils import session_getter
-from langflow.services.deps import (
-    get_credential_service,
-    get_db_service,
-    get_storage_service,
-)
+from langflow.services.deps import get_credential_service, get_db_service, get_storage_service
 from langflow.services.storage.service import StorageService
 from langflow.utils import validate
-from pydantic import BaseModel
-from sqlmodel import select
 
 if TYPE_CHECKING:
     from langflow.graph.graph.base import Graph
@@ -369,26 +357,6 @@ def template_config(self):
         """
         return self.build_template_config()
 
-    def build_template_config(self):
-        """
-        Builds the template configuration for the custom component.
-
-        Returns:
-            dict: The template configuration for the custom component.
-        """
-        if not self.code:
-            return {}
-
-        attributes = [
-            main_class["attributes"]
-            for main_class in self.tree.get("classes", [])
-            if main_class["name"] == self.get_main_class_name
-        ]
-        # Get just the first item
-        attributes = next(iter(attributes), [])
-
-        return super().build_template_config(attributes)
-
     @property
     def keys(self):
         """

From 479d6eca8ca5897f12e2bde9b4d21cbe0fc28ef5 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 22 Mar 2024 12:43:53 -0300
Subject: [PATCH 52/83] Refactor template_config generation in Component class

---
 .../langflow/interface/custom/custom_component/component.py     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/backend/langflow/interface/custom/custom_component/component.py b/src/backend/langflow/interface/custom/custom_component/component.py
index ca92135908..470ebcde80 100644
--- a/src/backend/langflow/interface/custom/custom_component/component.py
+++ b/src/backend/langflow/interface/custom/custom_component/component.py
@@ -84,5 +84,7 @@ def build_template_config(self) -> dict:
                 if value is not None:
                     template_config[attribute] = func(value=value)
 
+        return template_config
+
     def build(self, *args: Any, **kwargs: Any) -> Any:
         raise NotImplementedError

From b121a03a0b7a54949a2146f8f6e743036c6ae698 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Fri, 22 Mar 2024 12:49:00 -0300
Subject: [PATCH 53/83] Update description for AddNewVariableButton component

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

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 611ba71dd9..6e77b67f62 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -3,7 +3,7 @@ import { registerGlobalVariable } from "../../controllers/API";
 import BaseModal from "../../modals/baseModal";
 import useAlertStore from "../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../stores/globalVariables";
-import { ResponseErrorDetailAPI, ResponseErrorTypeAPI } from "../../types/api";
+import { ResponseErrorDetailAPI } from "../../types/api";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { Button } from "../ui/button";
@@ -48,7 +48,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   return (
     <BaseModal open={open} setOpen={setOpen} size="x-small">
       <BaseModal.Header
-        description={"Write a text global variable to use in any flow."}
+        description={
+          "This variable will be encrypted and will be available for you to use in any of your projects."
+        }
       >
         <span className="pr-2"> Create Variable </span>
         <ForwardedIconComponent

From fe2f30d5c5110c88c57fed9e354e82f1be3ee21c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 22 Mar 2024 17:18:29 +0100
Subject: [PATCH 54/83] Added global input component to modularize

---
 langflow1.db                                  | Bin 90112 -> 0 bytes
 .../components/parameterComponent/index.tsx   | 152 ++----------------
 .../components/codeTabsComponent/index.tsx    | 105 +++++-------
 .../components/inputGlobalComponent/index.tsx | 131 +++++++++++++++
 .../src/modals/EditNodeModal/index.tsx        | 138 ++++++----------
 5 files changed, 233 insertions(+), 293 deletions(-)
 delete mode 100644 langflow1.db
 create mode 100644 src/frontend/src/components/inputGlobalComponent/index.tsx

diff --git a/langflow1.db b/langflow1.db
deleted file mode 100644
index 2b39da5dd15e9197718ae2575b99af51f65a1115..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 90112
zcmeI5-EZ4icEF{0#*XvlnYI}tXcuL?GuU`DmPwJKBp2yccI3o~Ej#{-JxRd5BCjOI
z6e*LGZ6zHn63n9S`@H`}Q55JO(E@$#00sKCZ$+^M`q*>%VUe;Fe}rCmoFhoKNM2r^
z^SkHXd+vvQ)}AfuF6C;L-6Sq2roKp})2YAXxKt{AH<e0#1)slw&lULGfX`>}318{(
z%i!OTN5=e@n`8f%`f_9>b&HPu+pQZn{^90--k7}p@7I60#$R8)`d`;ZuKxb&(#Zde
zjEwx_;GFOZ5<mh-00|(0b0F|;@{5u2`}foDM_p1iC^2ZWs;kN#wH@6udk(*xTP>H?
z%iMZtcCpO$T;%Ru8x3w#%yyI8EUnHxF0I}Zvy)t9d7Z0lEG~Y_T^pTSuB@%EmKG}O
zy*VhY9hF;IU05ouZgWq|+uXfKev{WGAAC7H{_K7_rJEW(aCQyozZKGUE$>+A5l0bv
zPW;*S*zmY`JKgb;>jz5Bu=W*=I;yR=Tu_!Be-UW7P<dG1;`$`wmMa`f$lZ(FIk|Le
zc>MnDv>wa4?ND3MHI{m;Z?-{#ZkEA`$%i+G$G^Fqeih5kBu&cly45!?cD0)kJDPky
zaeZX`_U-f!zwnBd-OD~VVui@gu#)rc4~i^SToE<HB4wqhJBn&GTb4;pmz!N)UM!a?
z?0mbW5tnKT_*4(URMr=k%ItK_GBj$(GSIlb<^i`8?#bG+pPP^HFeS?>W+1vY$<A$5
z7M^XCxqHFk{PJpf;ZcRz(7li;w_2Vrua+xw<u#6-^Aca1{Kbvo@xQq}$fg(_MPNT~
zzW=Myk@35C(?1M(G*z2wpt??s?zd|(vfcB&e3`_1#AwqfkCtui=_h0aS@%MYmDzwo
z2<@#e_kLJU!BM<6JpSnJAdX!YiqQRjeevq>_~e~54egw?^c~t!m@WEWM|*8Ol7d;g
zf5_eQ?0sWoczpU!dbcOHKx;qg)d3lXXd-zArzT$xd)fY`CtJu*0b%`YM}lkvJ3MSX
z{HsckHY#y&YV!TYXCvcx?xcVFx!?YJ1pM1RkC~HyuAeC#XAK5%Tm`f_QYl@_B?i0V
zaL^i;AC*^QRs>a?sII<8!}=Y+I-vfBy7p^JLdqvLz_Zuu`=1Yw|LV>ld-P#K7vbR^
zem*ojK6N|&HY{RKPWFS@75n|!fbxwcWW~!)a9*3^ndJL=+G~P;D|n^LuCmXSSjqbL
zK$ALvD7(&b3tNj=F|>%|>|3_h|DtWxbb~5-lhhAyXRXgMMe8U|yXA}8x9ok3i?;DG
znff$8vFn~e8dhC5qggPy9M`g;Pxq@<s1m!-uXTzT2eji?KGcpggo?m^4uKDKmHAOO
z;gcTwRSMqtLIOwt2_OL^fCP{L5<mh-00|%gB!C3^6L|Nx=^INwd-r*2bhK0|rBovG
z8ZS~w5U5nm7DzQmh#(efnk>_rS~G}QXVa)(XRBWe*{|!GJzvO+k5y?iGh0*3dR?wm
zGDT;z(b`&=eodZ|OlQ8iOAihf=j~Nhl!f`HYgs-kP4VKCP~Ze%Mv!NCJ|l~KkuS!t
zNW~eUn8^u6IhXH$MamU(*FdlI*pDfA;|mEO0VIF~kN^@u0!RP}AOR$R1dsp{_z4pD
z`OwnnaWfMB`2UZou|NI<6-1Gd01`j~NB{{S0VIF~kN^@u0!RP}Ac27dt`GfeG~9{6
z_W#2l{o@M>AOR$R1dsp{Kmter2_OL^fCP{L61c<!*!n+?|1WU?qiRS12_OL^fCP{L
z5<mh-00|%gB!C2f0FM9B43Gd4Kmter2_OL^fCP{L5<mh-00~@v0yzG^{AG+9A^{|T
z1dsp{Kmter2_OL^fCP{L62S34+5i$j0!RP}AOR$R1dsp{Kmter2_S*XPk{aZzoDDI
zNsZmTwF<xRg#?fQ5<mh-00|%gB!C2v01`j~=R@G#%FyUvzgtf&l~PMCb^Lc7Ldlm(
zv&Ph%UCysP+o`vj+NSjA&5lfFA8!||PJ52*ZglK}wXCpMt8cyD)3(ZwU$@J1%RBq_
z&g;F-v&xpT{QSvUo|cPq{Q8^ir&ivrEIw;@TKac8oBIzQ<ONMG@|u?8X+bI$_(E3X
zi6)40mCqMzH7y=7J}1nG*$mHTA=Pma<=!n`86A(R)K$lFHk{qEv-+fzZEP-3so8q8
zMs;^@^XbOI)XKJ1S=id8>y?darM0;zuPpJkgVMvSBt3TJ*N-Y2?b0)YR_Q|9C`{G0
zC1T_XZ|1+-+OI!&pz@kZ)f$y^lt_}8CAC~tQmbmMDocfeMB?g5#TlN@2%vLOJXW2T
z>CwM@w?4^Ah_rNWhjzLORo1JU#^UB;@loSpGnY4>sI{rq;&(N5hb%N&vrDzMFuV7>
zC{3x_!t+PVa;YwC<(?e4yK?=>yg2`Scd7VLec0LDntQbAwzs$JM(*{LYn2{6SY9bt
zN()M9WkGpb-iETt3e{|0EJ%4t5QU;F)KsaM7iE#BRL#fL6N)oZK9iM&T&{4OdTjlF
zXzX{Xu^-2NH}=oxW8|1C5<mh-00|%gB!C2v01`j~NB{{S0VL2%;On8K^l`H@LoCs8
za~@ZIKD0D?+{^)6|4*m?HwABeeJTY0<L}egMg1zwXubQV;?gSJqc$~NZb`S_kevoG
z^|D#lO$ui<u4dU>`9P(HK~0r@%gwfR!}ZS2wjD_1IGO0|Q+7sxx15m+c|OOBk_1*-
zlZ3oTBv~efnygVOR`Xd^BSgx*oiHtpIukS8i?<WH2EQlf8pK_(t!B$zr_Gi@Tsrl-
zy|1bh-*OXfr$t$sIyI@Ss};DHoo-o<?&_8am)=esz)vwNWnivM&hmw#B*U~BB<jHV
z9G}m~f*=d|yewr!F)x1)S2W@h@76H;qav`UFiHJnfn44}69AC9r^4Gq`DTejm;4KH
zRaibY-EHeY7H)U#HV~ZvEmhjE42{}wa)Ko?bjR%`a2nQr_o&%6T-^ZlaH>WOhh<UI
z4Z03=Je03kp2TtXEt@?hOk<L!NAFN%NJg|h0>v6lrgb2pu6CcNn>7oLe7P*5DK#h_
zMXQEcGlo{%ZM9vcMQq1YBF<vjySn0EgwzoPp>Ts4ged|D;o-+ph)bLx3f*KRm@Tow
z=z`F6)$J+&P?tZs@=+NRSACDzI;k2x>N~F8qx~tZKZNzM1@G(L6*58ngBsQ?^P@_K
zTKvh2+><RqU7@PGIx&<k$ct+1M<q=V!yYko=s>9AMtg;@C#hPN(PQ<A8UQ@Keb#Q^
zsN@M^@!CJuY4qt!y*`&Zs;#$zUVEa%wY)B$3n_XIh6=6#*Mx4@a59Wy6}nYLHK1qn
z`?(3$&-Qr$BxP5QcD;Slvc6K&9jJ~SCF~&kBx9*8wcP|aiG)HoT({-SOi#BuZo@J&
zETT3@teY9tYEDCHXBuR0Lp#WRQ$x`$|BEvX$=qq^(-qg6_7!)Sernrsp=Yh>)X==X
zBhs^m{mBa^u$Mvs&#XyYm)eJEtJL#kJQHL09^+B5Bn~yG>c$*^eO+@KP<F7`2niZg
zuQ!-4l9fcbA?l{}b#bQl)u-z+Qzxth$9iiLti|%MmMP~1F~{?vw<d~WCeLSuY`!4N
zQm!cHn81C#wZ4)t8TvbIMAJNn5t^@^ePY)yZbyAoQcx=5v;}?WnS3_i@?t(pa0;Fg
zanX+Lr^6;~u$vlW5jIy7FU@VM%@Lb&glkZvRcjj@RBLd035-KrR_|S6>^PiCoHj9x
z4o9lsuyKZ7qnvJXo=FiS6V0b?SsEmOJrpoF;E1Vl9e9RHOfRb-17bpD)y+EG$;{(4
zZgZDSgny{|nF_$Rj9^3&jBAd%3kk3fMLeo240r#Wt^cRTeuVY^Pi63ndLjWNfCP{L
z5<mh-00|%gB!C2v01~)d1ibbCV^(1O@&6xEV}H0@x}!Eo00|%gB!C2v01`j~NB{{S
z0VIF~K1l*!4T+<Dc6#Ib|0ih;s5BBl0!RP}AOR$R1dsp{Kmter30xuqZ2kWv|Nk#N
z_OB^;;|mEO0VIF~kN^@u0!RP}AOR$R1dsp{_(>2DhV;?X{qHvK|No8scM9J4LIOwt
z2_OL^fCP{L5<mh-00|%gB!C1i34vSbE8kSrY>gLGiKi0r_y6Pg|B@6hs(}QM01`j~
zNB{{S0VIF~kN^@u0!Y9kFgEnfXmtD!C%+mTD$I*e5RW(!h7&kb#DiE^nEpXKyci$x
z=rAlE3l~H!>kSk$I55nbYeS%i{tp3_J{Y5oJ+c3tui(~x@nZU?W{DFB8xzEc31Y<@
zh8lvvGEQCbFLqC!b0nF*iUvVnSlOLCpp2Lo7$2L|A=qFY;*fZz1$jhc%q+L4Sz4Hy
zU6_Bqf102&g`Awp7xEB<P!@}YqRbxUhX5>Q#A2?%3pt^X&1ZSZGq`>s0R2Y~jv}K%
zV3I0PcjD1w4#NN`s%6v6VWJF+UX<}776tb`h8QIVM9TxoBGFdD`ZYK}SP&B=;dpq5
zf--qN7~v$8@FZ~oiPJGvh}on=;G|fjnUdK#wc_D}6V^N?W0K0NL~X<ayqtGDu%j_v
z2Dk0LbcyPFp^G^%!Xy>eXpKNHPNhK!#O{o@0~aaWW3Qa&!C<#dZPvhcgCAZ*0=|?<
z>d&IUUGN4jDq@nVH_3rwQ*g6-LVfDc*28m7)v2ALZ4aY}W#Jj8Y4D=rCXK<hcBmO|
z01}`O^z^5VcpBUmhBIV(2l6GVHUt|y5{&O6)%j*9V4_-kp&ZXCYTy~mJFGj01s;_#
zu6*!>?%*xF_ax4oAI36xO1GUq8nrIW^rSxQ2lNgr`$WCvPDxXOz{^uDo9^k<8xEYL
z{##y{QC2x$49LaLdrx;Dh<G%2?>uYD`~+flCp-`{xhc18SFIx_rUZFsf{ha6rQsdL
z%Oa$7w!-kEorf_t&)nDq(;{j3eLEb2MTEx*fZi~&tY~oppx%Q8Cjbt^-Qom5*p9H7
zmDu1qIy%4!0Nsv-T^`(7h8;!1^By<>5E?3L(mT*Y>uTi8Nj#$7fpyftFOn<VD<`X%
z+8#00m<4_u1DpW3urr)E0l=nVCvXCQjaCw?_=n@`i`wcP3Ye(Y(ZO}nntxy*e3FrF
ze8?G0QpA<V34ngn2%qi*02}{PFp(4Zmf=(kTS`5RHJXXGI)ROU-1O5qdDMwd@>sC?
zO>~8{bcHP+LnoG~-U&4~y;6dG^v;m@Yw28RWr1T$;HS2Tm*#qda*P4DvAW1vHO__O
zZmt>bp}!XAaIVEMf5(}bo(66iU$~5FHK+H4%uDm7xox#Mm6)8`AZDFHM!I)X8}haw
zSDQ)caE87^xhJ|w*j|utxkU>W$V&?xtl4ubHf=&qObNpxno_f^rlM8Du>%|SMv&~#
z__Ekprb~P5^#kP=R?-P3-G^#vkVn{M^a%XnB76!eL5jpYiQwUuT_>jghPW^do3yEi
z1W&t`65iLtDJJS*Sj$n3&Vd;0{W(b7x<Zu`LgmXin9+)-Ly~aV!XtHD#nqeCYR5-q
zHK?)Yx;puxIv0`+jj31Avp}#}BevF}Z0h3eL{n!qXNq;vFxr8y?3?4#7JTJ10&AKE
zHCfOuQJ4bpc4BpVne*PU61G<%n$zIxN_-Y@gE+XP9$&~kOM@M>t|#!SPNT3VTB5qr
zW{cVcR<h#0MIyE21iciW$%8tlLJ*PoEF==EF0Q`gEvhRCu8M}0AZfGdBkEb$4XQDF
z6c$2zywi)^ZiMnC$so3~dD+{vI>B07Exwic#V;RHSiV+?OSNCV;<#V?Nq^0Gdz=ko
zgG0&|klF;kc$VcbceMX5XLe8UD0mX{s~3Y?m)Il)bJ5sImMnH+adF98q3(6k<M}1A
zaoN{kS_KKFVTqd7p{)Vu&YAW-J|>~sc3g0uYdSSFuif?B=eFBwLkHezd0UHKyn=*Y
z3Z-V*P2#%2ZabE?3fnxOck}8FJJvNgn&|2h>>Xy8B72jA#%W*I+y<l<3ldy!P`%z@
z{(_ui?Naa7WH{Bb9Gz)Usydd@cKue9^|PngZ~Q&ehHCY$YHT+{%d&k>h2;kO9I~)a
zSt^KGDVK#;k!^Njo*vr)A!G`2p;+XFyvP@rpl>Xz3D<;-3_F{}ViA(dvdD|#_un7)
z|Nq(eA96TBixc+LIQ)0^Et?rx*j$J1oc9}GCOs~~;Xe-loya8J2^=dN{u3jLEUc;t
zjcIZC51Z*&H`W^b_XU0z&;C3KrYIn3ueafQE-;xETu-dk>>X7{CruL>*d%34y@H;l
z>qu-o(;ZAld0k{TzAN!rzzrJA;P4+@ZGiL9lVm68rEvJqc^$Q(JIwbF+m#bI<ENT3
z!QsE>3WRPt4*zlZf5C_UQeMi)yd(-Rp!fb*S%xmo8~*3`LPpL?VzyYw<=~H)`5at1
X9RKrzoX<;g9xe;;H_y`X<NyB$|7<os

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 1dbe0308a5..5d2c8dd9d7 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -2,17 +2,13 @@ import { cloneDeep } from "lodash";
 import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
-import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import DictComponent from "../../../../components/dictComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import FloatComponent from "../../../../components/floatComponent";
-import {
-  default as ForwardedIconComponent,
-  default as IconComponent,
-} from "../../../../components/genericIconComponent";
-import InputComponent from "../../../../components/inputComponent";
+import { default as IconComponent } from "../../../../components/genericIconComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
+import InputGlobalComponent from "../../../../components/inputGlobalComponent";
 import InputListComponent from "../../../../components/inputListComponent";
 import IntComponent from "../../../../components/intComponent";
 import KeypairListComponent from "../../../../components/keypairListComponent";
@@ -20,7 +16,6 @@ import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
 import { Button } from "../../../../components/ui/button";
-import { CommandItem } from "../../../../components/ui/command";
 import { RefreshButton } from "../../../../components/ui/refreshButton";
 import {
   INPUT_HANDLER_HOVER,
@@ -28,18 +23,11 @@ import {
   OUTPUT_HANDLER_HOVER,
   TOOLTIP_EMPTY,
 } from "../../../../constants/constants";
-import { deleteGlobalVariable } from "../../../../controllers/API";
-import DeleteConfirmationModal from "../../../../modals/DeleteConfirmationModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
 import { useTypesStore } from "../../../../stores/typesStore";
-import {
-  APIClassType,
-  ResponseErrorDetailAPI,
-  ResponseErrorTypeAPI,
-} from "../../../../types/api";
+import { APIClassType, ResponseErrorTypeAPI } from "../../../../types/api";
 import { ParameterComponentType } from "../../../../types/components";
 import {
   handleUpdateValues,
@@ -57,7 +45,7 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils/styleUtils";
-import { classNames, cn, groupByFamily } from "../../../../utils/utils";
+import { classNames, groupByFamily } from "../../../../utils/utils";
 
 export default function ParameterComponent({
   left,
@@ -83,49 +71,6 @@ export default function ParameterComponent({
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setNode = useFlowStore((state) => state.setNode);
-  const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries
-  );
-
-  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
-  const removeGlobalVariable = useGlobalVariablesStore(
-    (state) => state.removeGlobalVariable
-  );
-  function handleDelete(key: string) {
-    const id = getVariableId(key);
-    if (id !== undefined) {
-      deleteGlobalVariable(id)
-        .then((_) => {
-          removeGlobalVariable(key);
-          if (
-            data?.node?.template[name].value === key &&
-            data?.node?.template[name].load_from_db
-          ) {
-            handleOnNewValue("");
-            setNode(data.id, (oldNode) => {
-              let newNode = cloneDeep(oldNode);
-              newNode.data = {
-                ...newNode.data,
-              };
-              newNode.data.node.template[name].load_from_db = false;
-              return newNode;
-            });
-          }
-        })
-        .catch((error) => {
-          let responseError = error as ResponseErrorDetailAPI;
-          setErrorData({
-            title: "Error deleting variable",
-            list: [responseError.response.data.detail ?? "Unknown error"],
-          });
-        });
-    } else {
-      setErrorData({
-        title: "Error deleting variable",
-        list: [cn("ID not found for variable: ", key)],
-      });
-    }
-  }
 
   const [isLoading, setIsLoading] = useState(false);
   const flow = currentFlow?.data?.nodes ?? null;
@@ -169,24 +114,6 @@ export default function ParameterComponent({
     renderTooltips();
   };
 
-  useEffect(() => {
-    if (data.node?.template[name])
-      if (
-        !globalVariablesEntries.includes(data.node?.template[name].value) &&
-        data.node?.template[name].load_from_db
-      ) {
-        handleOnNewValue("");
-        setNode(data.id, (oldNode) => {
-          let newNode = cloneDeep(oldNode);
-          newNode.data = {
-            ...newNode.data,
-          };
-          newNode.data.node.template[name].load_from_db = false;
-          return newNode;
-        });
-      }
-  }, [globalVariablesEntries]);
-
   useEffect(() => {
     async function fetchData() {
       if (
@@ -609,80 +536,21 @@ export default function ParameterComponent({
                     (data.node?.template[name].refresh_button ? "w-5/6" : "")
                   }
                 >
-                  <InputComponent
-                    id={"input-" + name}
+                  <InputGlobalComponent
                     disabled={disabled}
-                    password={data.node?.template[name].password ?? false}
-                    value={data.node?.template[name].value ?? ""}
-                    options={globalVariablesEntries}
-                    optionsPlaceholder={"Global Variables"}
-                    optionsIcon="Globe"
-                    optionsButton={
-                      <AddNewVariableButton>
-                        <CommandItem value="doNotFilter-addNewVariable">
-                          <IconComponent
-                            name="Plus"
-                            className={cn("mr-2 h-4 w-4 text-primary")}
-                            aria-hidden="true"
-                          />
-                          <span>Add New Variable</span>
-                        </CommandItem>
-                      </AddNewVariableButton>
-                    }
-                    optionButton={(option) => (
-                      <DeleteConfirmationModal
-                        onConfirm={(e) => {
-                          e.stopPropagation();
-                          e.preventDefault();
-                          handleDelete(option);
-                        }}
-                        description={'variable "' + option + '"'}
-                        asChild
-                      >
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                          }}
-                          className="pr-1"
-                        >
-                          <ForwardedIconComponent
-                            name="Trash2"
-                            className={cn(
-                              "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100"
-                            )}
-                            aria-hidden="true"
-                          />
-                        </button>
-                      </DeleteConfirmationModal>
-                    )}
-                    selectedOption={
-                      data?.node?.template[name].load_from_db ?? false
-                        ? data?.node?.template[name].value
-                        : ""
-                    }
-                    setSelectedOption={(value) => {
-                      handleOnNewValue(value);
-                      setNode(data.id, (oldNode) => {
-                        let newNode = cloneDeep(oldNode);
-                        newNode.data = {
-                          ...newNode.data,
-                        };
-                        newNode.data.node.template[name].load_from_db =
-                          value === "" ? false : true;
-                        return newNode;
-                      });
-                    }}
-                    onChange={(value) => {
-                      handleOnNewValue(value);
+                    onChange={handleOnNewValue}
+                    setDb={(value) => {
                       setNode(data.id, (oldNode) => {
                         let newNode = cloneDeep(oldNode);
                         newNode.data = {
                           ...newNode.data,
                         };
-                        newNode.data.node.template[name].load_from_db = false;
+                        newNode.data.node.template[name].load_from_db = value;
                         return newNode;
                       });
                     }}
+                    name={name}
+                    data={data}
                   />
                 </div>
                 {data.node?.template[name].refresh_button && (
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 66b4d64c96..fc33982d25 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -6,7 +6,6 @@ import AccordionComponent from "../../components/AccordionComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
-import InputComponent from "../../components/inputComponent";
 import InputFileComponent from "../../components/inputFileComponent";
 import InputListComponent from "../../components/inputListComponent";
 import IntComponent from "../../components/intComponent";
@@ -28,10 +27,8 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
-import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
-import { useGlobalVariablesStore } from "../../stores/globalVariables";
 import { codeTabsPropsType } from "../../types/components";
 import {
   convertObjToArray,
@@ -41,6 +38,7 @@ import {
 import { classNames } from "../../utils/utils";
 import DictComponent from "../dictComponent";
 import IconComponent from "../genericIconComponent";
+import InputGlobalComponent from "../inputGlobalComponent";
 import KeypairListComponent from "../keypairListComponent";
 
 export default function CodeTabsComponent({
@@ -56,10 +54,7 @@ export default function CodeTabsComponent({
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const dark = useDarkStore((state) => state.dark);
   const unselectAll = useFlowStore((state) => state.unselectAll);
-  const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries
-  );
-  const setNoticeData = useAlertStore((state) => state.setNoticeData);
+  const setNode = useFlowStore((state) => state.setNode);
 
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
@@ -350,63 +345,30 @@ export default function CodeTabsComponent({
                                                     />
                                                   </div>
                                                 ) : (
-                                                  <InputComponent
-                                                    options={
-                                                      globalVariablesEntries
-                                                    }
-                                                    editNode={true}
+                                                  <InputGlobalComponent
                                                     disabled={false}
-                                                    password={
-                                                      node.data.node.template[
-                                                        templateField
-                                                      ].password ?? false
-                                                    }
-                                                    value={
-                                                      !node.data.node.template[
-                                                        templateField
-                                                      ].value ||
-                                                      node.data.node.template[
-                                                        templateField
-                                                      ].value === ""
-                                                        ? ""
-                                                        : node.data.node
-                                                            .template[
-                                                            templateField
-                                                          ].value
-                                                    }
                                                     onChange={(target) => {
-                                                      setData((old) => {
-                                                        let newInputList =
-                                                          cloneDeep(old);
-                                                        newInputList![
-                                                          i
-                                                        ].data.node.template[
-                                                          templateField
-                                                        ].value = target;
-                                                        if (
-                                                          globalVariablesEntries.includes(
-                                                            target
-                                                          )
-                                                        ) {
-                                                          setNoticeData({
-                                                            title: `the value inserted in ${templateField} is a global variable, \n 
-                                                          the real value will be update on run`,
-                                                          });
-                                                          newInputList![
-                                                            i
-                                                          ].data.node.template[
-                                                            templateField
-                                                          ].load_from_db = true;
-                                                        }
-                                                        else{
-                                                          newInputList![
-                                                            i
-                                                          ].data.node.template[
-                                                            templateField
-                                                          ].load_from_db = false;
-                                                        }
-                                                        return newInputList;
-                                                      });
+                                                      if (node.data) {
+                                                        setNode(
+                                                          node.data.id,
+                                                          (oldNode) => {
+                                                            let newNode =
+                                                              cloneDeep(
+                                                                oldNode
+                                                              );
+
+                                                            newNode.data = {
+                                                              ...newNode.data,
+                                                            };
+
+                                                            newNode.data.node.template[
+                                                              templateField
+                                                            ].value = target;
+
+                                                            return newNode;
+                                                          }
+                                                        );
+                                                      }
                                                       tweaks.buildTweakObject!(
                                                         node["data"]["id"],
                                                         target,
@@ -415,6 +377,25 @@ export default function CodeTabsComponent({
                                                         ]
                                                       );
                                                     }}
+                                                    setDb={(value) => {
+                                                      setNode(
+                                                        node.data.id,
+                                                        (oldNode) => {
+                                                          let newNode =
+                                                            cloneDeep(oldNode);
+                                                          newNode.data = {
+                                                            ...newNode.data,
+                                                          };
+                                                          newNode.data.node.template[
+                                                            templateField
+                                                          ].load_from_db =
+                                                            value;
+                                                          return newNode;
+                                                        }
+                                                      );
+                                                    }}
+                                                    name={templateField}
+                                                    data={node.data}
                                                   />
                                                 )}
                                               </div>
diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
new file mode 100644
index 0000000000..5fa64c4de4
--- /dev/null
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -0,0 +1,131 @@
+import { useEffect } from "react";
+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 { cn } from "../../utils/utils";
+import AddNewVariableButton from "../addNewVariableButtonComponent/addNewVariableButton";
+import ForwardedIconComponent from "../genericIconComponent";
+import InputComponent from "../inputComponent";
+import { CommandItem } from "../ui/command";
+
+export default function InputGlobalComponent({
+  disabled,
+  onChange,
+  setDb,
+  name,
+  data,
+}) {
+  const globalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.globalVariablesEntries
+  );
+
+  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
+  const removeGlobalVariable = useGlobalVariablesStore(
+    (state) => state.removeGlobalVariable
+  );
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+
+  useEffect(() => {
+    if (data.node?.template[name])
+      if (
+        !globalVariablesEntries.includes(data.node?.template[name].value) &&
+        data.node?.template[name].load_from_db
+      ) {
+        onChange("");
+        setDb(false);
+      }
+  }, [globalVariablesEntries]);
+
+  function handleDelete(key: string) {
+    const id = getVariableId(key);
+    if (id !== undefined) {
+      deleteGlobalVariable(id)
+        .then((_) => {
+          removeGlobalVariable(key);
+          if (
+            data?.node?.template[name].value === key &&
+            data?.node?.template[name].load_from_db
+          ) {
+            onChange("");
+            setDb(false);
+          }
+        })
+        .catch((error) => {
+          let responseError = error as ResponseErrorDetailAPI;
+          setErrorData({
+            title: "Error deleting variable",
+            list: [responseError.response.data.detail ?? "Unknown error"],
+          });
+        });
+    } else {
+      setErrorData({
+        title: "Error deleting variable",
+        list: [cn("ID not found for variable: ", key)],
+      });
+    }
+  }
+  return (
+    <InputComponent
+      id={"input-" + name}
+      disabled={disabled}
+      password={data.node?.template[name].password ?? false}
+      value={data.node?.template[name].value ?? ""}
+      options={globalVariablesEntries}
+      optionsPlaceholder={"Global Variables"}
+      optionsIcon="Globe"
+      optionsButton={
+        <AddNewVariableButton>
+          <CommandItem value="doNotFilter-addNewVariable">
+            <ForwardedIconComponent
+              name="Plus"
+              className={cn("mr-2 h-4 w-4 text-primary")}
+              aria-hidden="true"
+            />
+            <span>Add New Variable</span>
+          </CommandItem>
+        </AddNewVariableButton>
+      }
+      optionButton={(option) => (
+        <DeleteConfirmationModal
+          onConfirm={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            handleDelete(option);
+          }}
+          description={'variable "' + option + '"'}
+          asChild
+        >
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="pr-1"
+          >
+            <ForwardedIconComponent
+              name="Trash2"
+              className={cn(
+                "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100"
+              )}
+              aria-hidden="true"
+            />
+          </button>
+        </DeleteConfirmationModal>
+      )}
+      selectedOption={
+        data?.node?.template[name].load_from_db ?? false
+          ? data?.node?.template[name].value
+          : ""
+      }
+      setSelectedOption={(value) => {
+        onChange(value);
+        setDb(value !== "" ? true : false);
+      }}
+      onChange={(value) => {
+        onChange(value);
+        setDb(false);
+      }}
+    />
+  );
+}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 35ea0d8db3..2ea10fdc53 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -6,8 +6,8 @@ import DictComponent from "../../components/dictComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
 import IconComponent from "../../components/genericIconComponent";
-import InputComponent from "../../components/inputComponent";
 import InputFileComponent from "../../components/inputFileComponent";
+import InputGlobalComponent from "../../components/inputGlobalComponent";
 import InputListComponent from "../../components/inputListComponent";
 import IntComponent from "../../components/intComponent";
 import KeypairListComponent from "../../components/keypairListComponent";
@@ -162,11 +162,11 @@ const EditNodeModal = forwardRef(
                                 scapedJSONStringfy(
                                   myData.node!.template[templateParam].proxy
                                     ? {
-                                      ...id,
-                                      proxy:
-                                        myData.node?.template[templateParam]
-                                          .proxy,
-                                    }
+                                        ...id,
+                                        proxy:
+                                          myData.node?.template[templateParam]
+                                            .proxy,
+                                      }
                                     : id
                                 )
                             ) ?? false;
@@ -189,7 +189,7 @@ const EditNodeModal = forwardRef(
                                   content={
                                     myData.node?.template[templateParam].proxy
                                       ? myData.node?.template[templateParam]
-                                        .proxy?.id
+                                          .proxy?.id
                                       : null
                                   }
                                 >
@@ -197,16 +197,16 @@ const EditNodeModal = forwardRef(
                                     {myData.node?.template[templateParam]
                                       .display_name
                                       ? myData.node.template[templateParam]
-                                        .display_name
+                                          .display_name
                                       : myData.node?.template[templateParam]
-                                        .name}
+                                          .name}
                                   </span>
                                 </ShadTooltip>
                               </TableCell>
                               <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                                 {myData.node?.template[templateParam].type ===
                                   "str" &&
-                                  !myData.node.template[templateParam].options ? (
+                                !myData.node.template[templateParam].options ? (
                                   <div className="mx-auto">
                                     {myData.node.template[templateParam]
                                       .list ? (
@@ -216,12 +216,12 @@ const EditNodeModal = forwardRef(
                                         value={
                                           !myData.node.template[templateParam]
                                             .value ||
-                                            myData.node.template[templateParam]
-                                              .value === ""
+                                          myData.node.template[templateParam]
+                                            .value === ""
                                             ? [""]
                                             : myData.node.template[
-                                              templateParam
-                                            ].value
+                                                templateParam
+                                              ].value
                                         }
                                         onChange={(value: string[]) => {
                                           handleOnNewValue(
@@ -231,7 +231,7 @@ const EditNodeModal = forwardRef(
                                         }}
                                       />
                                     ) : myData.node.template[templateParam]
-                                      .multiline ? (
+                                        .multiline ? (
                                       <TextAreaComponent
                                         id={
                                           "textarea-edit-" +
@@ -259,67 +259,27 @@ const EditNodeModal = forwardRef(
                                         }}
                                       />
                                     ) : (
-                                      <InputComponent
-                                        id={
-                                          "input-" +
-                                          myData.node.template[templateParam]
-                                            .name
-                                        }
-                                        editNode={true}
-                                        options={globalVariablesEntries}
+                                      <InputGlobalComponent
                                         disabled={disabled}
-                                        password={
-                                          myData.node.template[templateParam]
-                                            .password ?? false
-                                        }
-                                        value={
-                                          myData.node.template[templateParam]
-                                            .value ?? ""
+                                        onChange={(value) =>
+                                          handleOnNewValue(value, templateParam)
                                         }
-                                        onChange={(value) => {
-                                          handleOnNewValue(
-                                            value,
-                                            templateParam
-                                          );
-                                          if (
-                                            globalVariablesEntries.includes(
-                                              value
-                                            )
-                                          ) {
-                                            setNoticeData({
-                                              title: `the value inserted in ${data.node?.display_name} is a global variable, \n 
-                                            the real value will be update on run`,
-                                            });
-                                            //mark as global variable
-                                            setNode(data.id, (oldNode) => {
-                                              let newNode = cloneDeep(oldNode);
-                                              newNode.data = {
-                                                ...newNode.data,
-                                              };
-                                              newNode.data.node.template[
-                                                templateParam
-                                              ].load_from_db = true;
-                                              return newNode;
-                                            });
-                                          }
-                                          else {
-                                            setNode(data.id, (oldNode) => {
-                                              let newNode = cloneDeep(oldNode);
-                                              newNode.data = {
-                                                ...newNode.data,
-                                              };
-                                              newNode.data.node.template[
-                                                templateParam
-                                              ].load_from_db = false;
-                                              return newNode;
-                                            });
-                                          }
+                                        setDb={(value) => {
+                                          setMyData((oldData) => {
+                                            let newData = cloneDeep(oldData);
+                                            newData.node!.template[
+                                              templateParam
+                                            ].load_from_db = value;
+                                            return newData;
+                                          });
                                         }}
+                                        name={templateParam}
+                                        data={myData}
                                       />
                                     )}
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "NestedDict" ? (
+                                    .type === "NestedDict" ? (
                                   <div className="  w-full">
                                     <DictComponent
                                       disabled={disabled}
@@ -329,10 +289,10 @@ const EditNodeModal = forwardRef(
                                           templateParam
                                         ]?.value?.toString() === "{}"
                                           ? {
-                                            yourkey: "value",
-                                          }
+                                              yourkey: "value",
+                                            }
                                           : myData.node!.template[templateParam]
-                                            .value
+                                              .value
                                       }
                                       onChange={(newValue) => {
                                         myData.node!.template[
@@ -347,7 +307,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "dict" ? (
+                                    .type === "dict" ? (
                                   <div
                                     className={classNames(
                                       "max-h-48 w-full overflow-auto custom-scroll",
@@ -363,14 +323,14 @@ const EditNodeModal = forwardRef(
                                       value={
                                         myData.node!.template[templateParam]
                                           .value?.length === 0 ||
-                                          !myData.node!.template[templateParam]
-                                            .value
+                                        !myData.node!.template[templateParam]
+                                          .value
                                           ? [{ "": "" }]
                                           : convertObjToArray(
-                                            myData.node!.template[
-                                              templateParam
-                                            ].value
-                                          )
+                                              myData.node!.template[
+                                                templateParam
+                                              ].value
+                                            )
                                       }
                                       duplicateKey={errorDuplicateKey}
                                       onChange={(newValue) => {
@@ -390,7 +350,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "bool" ? (
+                                    .type === "bool" ? (
                                   <div className="ml-auto">
                                     {" "}
                                     <ToggleShadComponent
@@ -414,7 +374,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "float" ? (
+                                    .type === "float" ? (
                                   <div className="mx-auto">
                                     <FloatComponent
                                       disabled={disabled}
@@ -433,7 +393,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "str" &&
+                                    .type === "str" &&
                                   myData.node.template[templateParam]
                                     .options ? (
                                   <div className="mx-auto">
@@ -458,7 +418,7 @@ const EditNodeModal = forwardRef(
                                     ></Dropdown>
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "int" ? (
+                                    .type === "int" ? (
                                   <div className="mx-auto">
                                     <IntComponent
                                       id={
@@ -477,7 +437,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "file" ? (
+                                    .type === "file" ? (
                                   <div className="mx-auto">
                                     <InputFileComponent
                                       editNode={true}
@@ -501,7 +461,7 @@ const EditNodeModal = forwardRef(
                                     ></InputFileComponent>
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "prompt" ? (
+                                    .type === "prompt" ? (
                                   <div className="mx-auto">
                                     <PromptAreaComponent
                                       readonly={
@@ -532,13 +492,13 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "code" ? (
+                                    .type === "code" ? (
                                   <div className="mx-auto">
                                     <CodeAreaComponent
                                       readonly={
                                         myData.node?.flow &&
-                                          myData.node.template[templateParam]
-                                            .dynamic
+                                        myData.node.template[templateParam]
+                                          .dynamic
                                           ? true
                                           : false
                                       }
@@ -566,7 +526,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
-                                  .type === "Any" ? (
+                                    .type === "Any" ? (
                                   "-"
                                 ) : (
                                   <div className="hidden"></div>

From 7aa3c5f4949261d68c6692f58bf26fd995389dad Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 22 Mar 2024 17:48:19 +0100
Subject: [PATCH 55/83] Added type into new Global input component

---
 .../src/components/inputGlobalComponent/index.tsx        | 3 ++-
 src/frontend/src/types/components/index.ts               | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index 5fa64c4de4..bf6a5555ed 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -9,6 +9,7 @@ import AddNewVariableButton from "../addNewVariableButtonComponent/addNewVariabl
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { CommandItem } from "../ui/command";
+import { InputGlobalComponentType } from "../../types/components";
 
 export default function InputGlobalComponent({
   disabled,
@@ -16,7 +17,7 @@ export default function InputGlobalComponent({
   setDb,
   name,
   data,
-}) {
+}: InputGlobalComponentType): JSX.Element {
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
   );
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 4395ab24cc..afa42d3120 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -71,6 +71,15 @@ export type InputListComponentType = {
   editNode?: boolean;
 };
 
+export type InputGlobalComponentType = 
+  {
+    disabled: boolean,
+    onChange: (value: string) => void,
+    setDb: (value: boolean) => void,
+    name: string,
+    data: NodeDataType,
+  };
+
 export type KeyPairListComponentType = {
   value: any;
   onChange: (value: Object[]) => void;

From 2ba305bc7a66858af09da8a397d824d4215cbdb1 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 25 Mar 2024 09:46:53 -0300
Subject: [PATCH 56/83] Add Variable model and remove Credential model

---
 ..._replace_credential_table_with_variable.py |  63 ++++++++++
 src/backend/langflow/api/router.py            |   3 +-
 src/backend/langflow/api/v1/__init__.py       |   4 +-
 src/backend/langflow/api/v1/credential.py     | 118 ------------------
 src/backend/langflow/api/v1/variable.py       | 113 +++++++++++++++++
 .../custom_component/custom_component.py      |  21 ++--
 .../langflow/services/credentials/factory.py  |   8 +-
 .../langflow/services/credentials/service.py  |  17 ++-
 .../services/database/models/__init__.py      |   4 +-
 .../database/models/credential/__init__.py    |   3 -
 .../database/models/credential/model.py       |  42 -------
 .../database/models/credential/schema.py      |   8 --
 .../services/database/models/user/model.py    |   4 +-
 .../database/models/variable/__init__.py      |   3 +
 src/backend/langflow/services/deps.py         |   9 +-
 src/backend/langflow/services/schema.py       |   2 +-
 src/backend/langflow/services/utils.py        |  20 +--
 src/frontend/src/controllers/API/index.ts     |   8 +-
 18 files changed, 223 insertions(+), 227 deletions(-)
 create mode 100644 src/backend/langflow/alembic/versions/1a110b568907_replace_credential_table_with_variable.py
 delete mode 100644 src/backend/langflow/api/v1/credential.py
 create mode 100644 src/backend/langflow/api/v1/variable.py
 delete mode 100644 src/backend/langflow/services/database/models/credential/__init__.py
 delete mode 100644 src/backend/langflow/services/database/models/credential/model.py
 delete mode 100644 src/backend/langflow/services/database/models/credential/schema.py
 create mode 100644 src/backend/langflow/services/database/models/variable/__init__.py

diff --git a/src/backend/langflow/alembic/versions/1a110b568907_replace_credential_table_with_variable.py b/src/backend/langflow/alembic/versions/1a110b568907_replace_credential_table_with_variable.py
new file mode 100644
index 0000000000..0e53e3b094
--- /dev/null
+++ b/src/backend/langflow/alembic/versions/1a110b568907_replace_credential_table_with_variable.py
@@ -0,0 +1,63 @@
+"""Replace Credential table with Variable
+
+Revision ID: 1a110b568907
+Revises: 63b9c451fd30
+Create Date: 2024-03-25 09:40:02.743453
+
+"""
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+from sqlalchemy.engine.reflection import Inspector
+
+# revision identifiers, used by Alembic.
+revision: str = '1a110b568907'
+down_revision: Union[str, None] = '63b9c451fd30'
+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! ###
+    if "variable" not in table_names:
+        op.create_table('variable',
+        sa.Column('name', sqlmodel.sql.sqltypes.AutoString(), nullable=True),
+        sa.Column('value', sqlmodel.sql.sqltypes.AutoString(), nullable=True),
+        sa.Column('type', sqlmodel.sql.sqltypes.AutoString(), nullable=True),
+        sa.Column('id', sqlmodel.sql.sqltypes.GUID(), nullable=False),
+        sa.Column('created_at', sa.DateTime(), nullable=False),
+        sa.Column('updated_at', sa.DateTime(), nullable=True),
+        sa.Column('user_id', sqlmodel.sql.sqltypes.GUID(), nullable=False),
+        sa.ForeignKeyConstraint(['user_id'], ['user.id'], name='fk_variable_user_id'),
+        sa.PrimaryKeyConstraint('id')
+        )
+    if "credential" in table_names:
+        op.drop_table('credential')
+    # ### 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! ###
+    if "credential" not in table_names:
+        op.create_table('credential',
+        sa.Column('name', sa.VARCHAR(), nullable=True),
+        sa.Column('value', sa.VARCHAR(), nullable=True),
+        sa.Column('provider', sa.VARCHAR(), nullable=True),
+        sa.Column('user_id', sa.CHAR(length=32), nullable=False),
+        sa.Column('id', sa.CHAR(length=32), nullable=False),
+        sa.Column('created_at', sa.DATETIME(), nullable=False),
+        sa.Column('updated_at', sa.DATETIME(), nullable=True),
+        sa.ForeignKeyConstraint(['user_id'], ['user.id'], name='fk_credential_user_id'),
+        sa.PrimaryKeyConstraint('id')
+        )
+    if "variable" in table_names:
+        op.drop_table('variable')
+    # ### end Alembic commands ###
diff --git a/src/backend/langflow/api/router.py b/src/backend/langflow/api/router.py
index d117e9d114..ae221435a3 100644
--- a/src/backend/langflow/api/router.py
+++ b/src/backend/langflow/api/router.py
@@ -4,7 +4,6 @@
 from langflow.api.v1 import (
     api_key_router,
     chat_router,
-    credentials_router,
     endpoints_router,
     files_router,
     flows_router,
@@ -26,6 +25,6 @@
 router.include_router(users_router)
 router.include_router(api_key_router)
 router.include_router(login_router)
-router.include_router(credentials_router)
+router.include_router(variables_router)
 router.include_router(files_router)
 router.include_router(monitor_router)
diff --git a/src/backend/langflow/api/v1/__init__.py b/src/backend/langflow/api/v1/__init__.py
index 39659748e5..0342c76c82 100644
--- a/src/backend/langflow/api/v1/__init__.py
+++ b/src/backend/langflow/api/v1/__init__.py
@@ -1,6 +1,5 @@
 from langflow.api.v1.api_key import router as api_key_router
 from langflow.api.v1.chat import router as chat_router
-from langflow.api.v1.credential import router as credentials_router
 from langflow.api.v1.endpoints import router as endpoints_router
 from langflow.api.v1.files import router as files_router
 from langflow.api.v1.flows import router as flows_router
@@ -9,6 +8,7 @@
 from langflow.api.v1.store import router as store_router
 from langflow.api.v1.users import router as users_router
 from langflow.api.v1.validate import router as validate_router
+from langflow.api.v1.variable import router as variables_router
 
 __all__ = [
     "chat_router",
@@ -19,7 +19,7 @@
     "users_router",
     "api_key_router",
     "login_router",
-    "credentials_router",
+    "variables_router",
     "monitor_router",
     "files_router",
 ]
diff --git a/src/backend/langflow/api/v1/credential.py b/src/backend/langflow/api/v1/credential.py
deleted file mode 100644
index 836a2629e2..0000000000
--- a/src/backend/langflow/api/v1/credential.py
+++ /dev/null
@@ -1,118 +0,0 @@
-from datetime import datetime
-from uuid import UUID
-
-from fastapi import APIRouter, Depends, HTTPException
-from sqlmodel import Session, select
-
-from langflow.services.auth import utils as auth_utils
-from langflow.services.auth.utils import get_current_active_user
-from langflow.services.database.models.credential import (
-    Credential,
-    CredentialCreate,
-    CredentialRead,
-    CredentialUpdate,
-)
-from langflow.services.database.models.user.model import User
-from langflow.services.deps import get_session, get_settings_service
-
-router = APIRouter(prefix="/credentials", tags=["Credentials"])
-
-
-@router.post("/", response_model=CredentialRead, status_code=201)
-def create_credential(
-    *,
-    session: Session = Depends(get_session),
-    credential: CredentialCreate,
-    current_user: User = Depends(get_current_active_user),
-    settings_service=Depends(get_settings_service),
-):
-    """Create a new credential."""
-    try:
-        # check if credential name already exists
-        credential_exists = session.exec(
-            select(Credential).where(
-                Credential.name == credential.name,
-                Credential.user_id == current_user.id,
-            )
-        ).first()
-        if credential_exists:
-            raise HTTPException(status_code=400, detail="Credential name already exists")
-
-        credential_dict = credential.model_dump()
-        credential_dict["user_id"] = current_user.id
-
-        db_credential = Credential.model_validate(credential_dict)
-        if not db_credential.value:
-            raise HTTPException(status_code=400, detail="Credential value cannot be empty")
-        encrypted = auth_utils.encrypt_api_key(db_credential.value, settings_service=settings_service)
-        db_credential.value = encrypted
-        db_credential.user_id = current_user.id
-        session.add(db_credential)
-        session.commit()
-        session.refresh(db_credential)
-        return db_credential
-    except Exception as e:
-        if isinstance(e, HTTPException):
-            raise e
-        raise HTTPException(status_code=500, detail=str(e)) from e
-
-
-@router.get("/", response_model=list[CredentialRead], status_code=200)
-def read_credentials(
-    *,
-    session: Session = Depends(get_session),
-    current_user: User = Depends(get_current_active_user),
-):
-    """Read all credentials."""
-    try:
-        credentials = session.exec(select(Credential).where(Credential.user_id == current_user.id)).all()
-        return credentials
-    except Exception as e:
-        raise HTTPException(status_code=500, detail=str(e)) from e
-
-
-@router.patch("/{credential_id}", response_model=CredentialRead, status_code=200)
-def update_credential(
-    *,
-    session: Session = Depends(get_session),
-    credential_id: UUID,
-    credential: CredentialUpdate,
-    current_user: User = Depends(get_current_active_user),
-):
-    """Update a credential."""
-    try:
-        db_credential = session.exec(
-            select(Credential).where(Credential.id == credential_id, Credential.user_id == current_user.id)
-        ).first()
-        if not db_credential:
-            raise HTTPException(status_code=404, detail="Credential not found")
-
-        credential_data = credential.model_dump(exclude_unset=True)
-        for key, value in credential_data.items():
-            setattr(db_credential, key, value)
-        db_credential.updated_at = datetime.utcnow()
-        session.commit()
-        session.refresh(db_credential)
-        return db_credential
-    except Exception as e:
-        raise HTTPException(status_code=500, detail=str(e)) from e
-
-
-@router.delete("/{credential_id}", status_code=204)
-def delete_credential(
-    *,
-    session: Session = Depends(get_session),
-    credential_id: UUID,
-    current_user: User = Depends(get_current_active_user),
-):
-    """Delete a credential."""
-    try:
-        db_credential = session.exec(
-            select(Credential).where(Credential.id == credential_id, Credential.user_id == current_user.id)
-        ).first()
-        if not db_credential:
-            raise HTTPException(status_code=404, detail="Credential not found")
-        session.delete(db_credential)
-        session.commit()
-    except Exception as e:
-        raise HTTPException(status_code=500, detail=str(e)) from e
diff --git a/src/backend/langflow/api/v1/variable.py b/src/backend/langflow/api/v1/variable.py
new file mode 100644
index 0000000000..1230866766
--- /dev/null
+++ b/src/backend/langflow/api/v1/variable.py
@@ -0,0 +1,113 @@
+from datetime import datetime
+from uuid import UUID
+
+from fastapi import APIRouter, Depends, HTTPException
+from sqlmodel import Session, select
+
+from langflow.services.auth import utils as auth_utils
+from langflow.services.auth.utils import get_current_active_user
+from langflow.services.database.models.user.model import User
+from langflow.services.database.models.variable import Variable, VariableCreate, VariableRead, VariableUpdate
+from langflow.services.deps import get_session, get_settings_service
+
+router = APIRouter(prefix="/variables", tags=["Variables"])
+
+
+@router.post("/", response_model=VariableRead, status_code=201)
+def create_variable(
+    *,
+    session: Session = Depends(get_session),
+    variable: VariableCreate,
+    current_user: User = Depends(get_current_active_user),
+    settings_service=Depends(get_settings_service),
+):
+    """Create a new variable."""
+    try:
+        # check if variable name already exists
+        variable_exists = session.exec(
+            select(Variable).where(
+                Variable.name == variable.name,
+                Variable.user_id == current_user.id,
+            )
+        ).first()
+        if variable_exists:
+            raise HTTPException(status_code=400, detail="Variable name already exists")
+
+        variable_dict = variable.model_dump()
+        variable_dict["user_id"] = current_user.id
+
+        db_variable = Variable.model_validate(variable_dict)
+        if 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
+        db_variable.user_id = current_user.id
+        session.add(db_variable)
+        session.commit()
+        session.refresh(db_variable)
+        return db_variable
+    except Exception as e:
+        if isinstance(e, HTTPException):
+            raise e
+        raise HTTPException(status_code=500, detail=str(e)) from e
+
+
+@router.get("/", response_model=list[VariableRead], status_code=200)
+def read_variables(
+    *,
+    session: Session = Depends(get_session),
+    current_user: User = Depends(get_current_active_user),
+):
+    """Read all variables."""
+    try:
+        variables = session.exec(select(Variable).where(Variable.user_id == current_user.id)).all()
+        return variables
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e
+
+
+@router.patch("/{variable_id}", response_model=VariableRead, status_code=200)
+def update_variable(
+    *,
+    session: Session = Depends(get_session),
+    variable_id: UUID,
+    variable: VariableUpdate,
+    current_user: User = Depends(get_current_active_user),
+):
+    """Update a variable."""
+    try:
+        db_variable = session.exec(
+            select(Variable).where(Variable.id == variable_id, Variable.user_id == current_user.id)
+        ).first()
+        if not db_variable:
+            raise HTTPException(status_code=404, detail="Variable not found")
+
+        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()
+        session.commit()
+        session.refresh(db_variable)
+        return db_variable
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e
+
+
+@router.delete("/{variable_id}", status_code=204)
+def delete_variable(
+    *,
+    session: Session = Depends(get_session),
+    variable_id: UUID,
+    current_user: User = Depends(get_current_active_user),
+):
+    """Delete a variable."""
+    try:
+        db_variable = session.exec(
+            select(Variable).where(Variable.id == variable_id, Variable.user_id == current_user.id)
+        ).first()
+        if not db_variable:
+            raise HTTPException(status_code=404, detail="Variable not found")
+        session.delete(db_variable)
+        session.commit()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e)) from e
diff --git a/src/backend/langflow/interface/custom/custom_component/custom_component.py b/src/backend/langflow/interface/custom/custom_component/custom_component.py
index 715aa72f3d..1cc1a514c0 100644
--- a/src/backend/langflow/interface/custom/custom_component/custom_component.py
+++ b/src/backend/langflow/interface/custom/custom_component/custom_component.py
@@ -1,6 +1,7 @@
 import operator
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, ClassVar, List, Optional, Sequence, Union
+from typing import (TYPE_CHECKING, Any, Callable, ClassVar, List, Optional,
+                    Sequence, Union)
 from uuid import UUID
 
 import yaml
@@ -11,14 +12,14 @@
 
 from langflow.interface.custom.code_parser.utils import (
     extract_inner_type_from_generic_alias,
-    extract_union_types_from_generic_alias,
-)
+    extract_union_types_from_generic_alias)
 from langflow.interface.custom.custom_component.component import Component
 from langflow.schema import Record
 from langflow.schema.dotdict import dotdict
 from langflow.services.database.models.flow import Flow
 from langflow.services.database.utils import session_getter
-from langflow.services.deps import get_credential_service, get_db_service, get_storage_service
+from langflow.services.deps import get_db_service, get_storage_service, get_variable_service
+                                    get_variable_service)
 from langflow.services.storage.service import StorageService
 from langflow.utils import validate
 
@@ -372,30 +373,30 @@ def keys(self):
         def get_credential(name: str):
             if hasattr(self, "_user_id") and not self._user_id:
                 raise ValueError(f"User id is not set for {self.__class__.__name__}")
-            credential_service = get_credential_service()  # Get service instance
+            variable_service = get_variable_service()  # Get service instance
             # Retrieve and decrypt the credential by name for the current user
             db_service = get_db_service()
             with session_getter(db_service) as session:
-                return credential_service.get_credential(user_id=self._user_id or "", name=name, session=session)
+                return variable_service.get_credential(user_id=self._user_id or "", name=name, session=session)
 
         return get_credential
 
     def list_key_names(self):
         """
-        Lists the names of the credentials for the current user.
+        Lists the names of the variables for the current user.
 
         Raises:
             ValueError: If the user id is not set.
 
         Returns:
-            List[str]: The names of the credentials for the current user.
+            List[str]: The names of the variables for the current user.
         """
         if hasattr(self, "_user_id") and not self._user_id:
             raise ValueError(f"User id is not set for {self.__class__.__name__}")
-        credential_service = get_credential_service()
+        variable_service = get_variable_service()
         db_service = get_db_service()
         with session_getter(db_service) as session:
-            return credential_service.list_credentials(user_id=self._user_id, session=session)
+            return variable_service.list_variables(user_id=self._user_id, session=session)
 
     def index(self, value: int = 0):
         """
diff --git a/src/backend/langflow/services/credentials/factory.py b/src/backend/langflow/services/credentials/factory.py
index c44a43da42..24a652c4e4 100644
--- a/src/backend/langflow/services/credentials/factory.py
+++ b/src/backend/langflow/services/credentials/factory.py
@@ -1,15 +1,15 @@
 from typing import TYPE_CHECKING
 
-from langflow.services.credentials.service import CredentialService
+from langflow.services.credentials.service import VariableService
 from langflow.services.factory import ServiceFactory
 
 if TYPE_CHECKING:
     from langflow.services.settings.service import SettingsService
 
 
-class CredentialServiceFactory(ServiceFactory):
+class VariableServiceFactory(ServiceFactory):
     def __init__(self):
-        super().__init__(CredentialService)
+        super().__init__(VariableService)
 
     def create(self, settings_service: "SettingsService"):
-        return CredentialService(settings_service)
+        return VariableService(settings_service)
diff --git a/src/backend/langflow/services/credentials/service.py b/src/backend/langflow/services/credentials/service.py
index 08e04fdaa9..a555f3177e 100644
--- a/src/backend/langflow/services/credentials/service.py
+++ b/src/backend/langflow/services/credentials/service.py
@@ -2,28 +2,27 @@
 from uuid import UUID
 
 from fastapi import Depends
+from sqlmodel import Session, select
+
 from langflow.services.auth import utils as auth_utils
 from langflow.services.base import Service
-from langflow.services.database.models.credential.model import Credential
+from langflow.services.database.models.variable.model import Variable
 from langflow.services.deps import get_session
-from sqlmodel import Session, select
 
 if TYPE_CHECKING:
     from langflow.services.settings.service import SettingsService
 
 
-class CredentialService(Service):
-    name = "credential_service"
+class VariableService(Service):
+    name = "variable_service"
 
     def __init__(self, settings_service: "SettingsService"):
         self.settings_service = settings_service
 
     def get_credential(self, user_id: Union[UUID, str], name: str, session: Session = Depends(get_session)) -> str:
         # we get the credential from the database
-        # credential = session.query(Credential).filter(Credential.user_id == user_id, Credential.name == name).first()
-        credential = session.exec(
-            select(Credential).where(Credential.user_id == user_id, Credential.name == name)
-        ).first()
+        # credential = session.query(Variable).filter(Variable.user_id == user_id, Variable.name == name).first()
+        credential = session.exec(select(Variable).where(Variable.user_id == user_id, Variable.name == name)).first()
         # we decrypt the value
         if not credential or not credential.value:
             raise ValueError(f"{name} credential not found.")
@@ -33,5 +32,5 @@ def get_credential(self, user_id: Union[UUID, str], name: str, session: Session
     def list_credentials(
         self, user_id: Union[UUID, str], session: Session = Depends(get_session)
     ) -> list[Optional[str]]:
-        credentials = session.exec(select(Credential).where(Credential.user_id == user_id)).all()
+        credentials = session.exec(select(Variable).where(Variable.user_id == user_id)).all()
         return [credential.name for credential in credentials]
diff --git a/src/backend/langflow/services/database/models/__init__.py b/src/backend/langflow/services/database/models/__init__.py
index 9dd3e0285b..1f19435bd4 100644
--- a/src/backend/langflow/services/database/models/__init__.py
+++ b/src/backend/langflow/services/database/models/__init__.py
@@ -1,6 +1,6 @@
 from .api_key import ApiKey
-from .credential import Credential
 from .flow import Flow
 from .user import User
+from .variable import Variable
 
-__all__ = ["Flow", "User", "ApiKey", "Credential"]
+__all__ = ["Flow", "User", "ApiKey", "Variable"]
diff --git a/src/backend/langflow/services/database/models/credential/__init__.py b/src/backend/langflow/services/database/models/credential/__init__.py
deleted file mode 100644
index 2f8b6cd014..0000000000
--- a/src/backend/langflow/services/database/models/credential/__init__.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from .model import Credential, CredentialCreate, CredentialRead, CredentialUpdate
-
-__all__ = ["Credential", "CredentialCreate", "CredentialRead", "CredentialUpdate"]
diff --git a/src/backend/langflow/services/database/models/credential/model.py b/src/backend/langflow/services/database/models/credential/model.py
deleted file mode 100644
index 5c9f7d9b0e..0000000000
--- a/src/backend/langflow/services/database/models/credential/model.py
+++ /dev/null
@@ -1,42 +0,0 @@
-from datetime import datetime
-from typing import TYPE_CHECKING, Optional
-from uuid import UUID, uuid4
-
-from langflow.services.database.models.credential.schema import CredentialType
-from sqlmodel import Field, Relationship, SQLModel
-
-if TYPE_CHECKING:
-    from langflow.services.database.models.user import User
-
-
-class CredentialBase(SQLModel):
-    name: Optional[str] = Field(None, description="Name of the credential")
-    value: Optional[str] = Field(None, description="Encrypted value of the credential")
-    provider: Optional[str] = Field(None, description="Provider of the credential (e.g OpenAI)")
-
-
-class Credential(CredentialBase, table=True):
-    id: Optional[UUID] = Field(default_factory=uuid4, primary_key=True, description="Unique ID for the credential")
-    # name is unique per user
-    created_at: datetime = Field(default_factory=datetime.utcnow, description="Creation time of the credential")
-    updated_at: Optional[datetime] = Field(None, description="Last update time of the credential")
-    # foreign key to user table
-    user_id: UUID = Field(description="User ID associated with this credential", foreign_key="user.id")
-    user: "User" = Relationship(back_populates="credentials")
-
-
-class CredentialCreate(CredentialBase):
-    # AcceptedProviders is a custom Enum
-    provider: Optional[CredentialType] = Field(None, description="Provider of the credential (e.g OpenAI)")
-
-
-class CredentialRead(SQLModel):
-    id: UUID
-    name: Optional[str] = Field(None, description="Name of the credential")
-    provider: Optional[str] = Field(None, description="Provider of the credential (e.g OpenAI)")
-
-
-class CredentialUpdate(SQLModel):
-    id: UUID  # Include the ID for updating
-    name: Optional[str] = Field(None, description="Name of the credential")
-    value: Optional[str] = Field(None, description="Encrypted value of the credential")
diff --git a/src/backend/langflow/services/database/models/credential/schema.py b/src/backend/langflow/services/database/models/credential/schema.py
deleted file mode 100644
index 9859153406..0000000000
--- a/src/backend/langflow/services/database/models/credential/schema.py
+++ /dev/null
@@ -1,8 +0,0 @@
-from enum import Enum
-
-
-class CredentialType(str, Enum):
-    """CredentialType is an Enum of the accepted providers"""
-
-    OPENAI_API_KEY = "OPENAI_API_KEY"
-    ANTHROPIC_API_KEY = "ANTHROPIC_API_KEY"
diff --git a/src/backend/langflow/services/database/models/user/model.py b/src/backend/langflow/services/database/models/user/model.py
index dccd3c3056..fa229b4b30 100644
--- a/src/backend/langflow/services/database/models/user/model.py
+++ b/src/backend/langflow/services/database/models/user/model.py
@@ -6,7 +6,7 @@
 
 if TYPE_CHECKING:
     from langflow.services.database.models.api_key import ApiKey
-    from langflow.services.database.models.credential import Credential
+    from langflow.services.database.models.variable import Variable
     from langflow.services.database.models.flow import Flow
 
 
@@ -26,7 +26,7 @@ class User(SQLModel, table=True):
     )
     store_api_key: Optional[str] = Field(default=None, nullable=True)
     flows: list["Flow"] = Relationship(back_populates="user")
-    credentials: list["Credential"] = Relationship(
+    variables: list["Variable"] = Relationship(
         back_populates="user",
         sa_relationship_kwargs={"cascade": "delete"},
     )
diff --git a/src/backend/langflow/services/database/models/variable/__init__.py b/src/backend/langflow/services/database/models/variable/__init__.py
new file mode 100644
index 0000000000..62ecc4f870
--- /dev/null
+++ b/src/backend/langflow/services/database/models/variable/__init__.py
@@ -0,0 +1,3 @@
+from .model import Variable, VariableCreate, VariableRead, VariableUpdate
+
+__all__ = ["Variable", "VariableCreate", "VariableRead", "VariableUpdate"]
diff --git a/src/backend/langflow/services/deps.py b/src/backend/langflow/services/deps.py
index 7d2338b04c..6ece860088 100644
--- a/src/backend/langflow/services/deps.py
+++ b/src/backend/langflow/services/deps.py
@@ -4,9 +4,11 @@
 from langflow.services import ServiceType, service_manager
 
 if TYPE_CHECKING:
+    from sqlmodel import Session
+
     from langflow.services.cache.service import BaseCacheService
     from langflow.services.chat.service import ChatService
-    from langflow.services.credentials.service import CredentialService
+    from langflow.services.credentials.service import VariableService
     from langflow.services.database.service import DatabaseService
     from langflow.services.monitor.service import MonitorService
     from langflow.services.plugins.service import PluginService
@@ -16,7 +18,6 @@
     from langflow.services.storage.service import StorageService
     from langflow.services.store.service import StoreService
     from langflow.services.task.service import TaskService
-    from sqlmodel import Session
 
 
 def get_socket_service() -> "SocketIOService":
@@ -27,8 +28,8 @@ def get_storage_service() -> "StorageService":
     return service_manager.get(ServiceType.STORAGE_SERVICE)  # type: ignore
 
 
-def get_credential_service() -> "CredentialService":
-    return service_manager.get(ServiceType.CREDENTIAL_SERVICE)  # type: ignore
+def get_variable_service() -> "VariableService":
+    return service_manager.get(ServiceType.VARIABLE_SERVICE)  # type: ignore
 
 
 def get_plugins_service() -> "PluginService":
diff --git a/src/backend/langflow/services/schema.py b/src/backend/langflow/services/schema.py
index 7e78fc178d..75f57b6214 100644
--- a/src/backend/langflow/services/schema.py
+++ b/src/backend/langflow/services/schema.py
@@ -16,7 +16,7 @@ class ServiceType(str, Enum):
     TASK_SERVICE = "task_service"
     PLUGIN_SERVICE = "plugin_service"
     STORE_SERVICE = "store_service"
-    CREDENTIAL_SERVICE = "credential_service"
+    VARIABLE_SERVICE = "variable_service"
     STORAGE_SERVICE = "storage_service"
     MONITOR_SERVICE = "monitor_service"
     SOCKET_IO_SERVICE = "socket_io_service"
diff --git a/src/backend/langflow/services/utils.py b/src/backend/langflow/services/utils.py
index 4c3533e97e..8e2c8cfb7b 100644
--- a/src/backend/langflow/services/utils.py
+++ b/src/backend/langflow/services/utils.py
@@ -5,10 +5,7 @@
 from langflow.services.database.utils import initialize_database
 from langflow.services.manager import service_manager
 from langflow.services.schema import ServiceType
-from langflow.services.settings.constants import (
-    DEFAULT_SUPERUSER,
-    DEFAULT_SUPERUSER_PASSWORD,
-)
+from langflow.services.settings.constants import DEFAULT_SUPERUSER, DEFAULT_SUPERUSER_PASSWORD
 from langflow.services.socket.utils import set_socketio_server
 
 from .deps import get_db_service, get_session, get_settings_service
@@ -22,9 +19,7 @@ def get_factories_and_deps():
     from langflow.services.database import factory as database_factory
     from langflow.services.monitor import factory as monitor_factory
     from langflow.services.plugins import factory as plugins_factory
-    from langflow.services.session import (
-        factory as session_service_factory,
-    )  # type: ignore
+    from langflow.services.session import factory as session_service_factory  # type: ignore
     from langflow.services.settings import factory as settings_factory
     from langflow.services.socket import factory as socket_factory
     from langflow.services.storage import factory as storage_factory
@@ -54,7 +49,7 @@ def get_factories_and_deps():
         (plugins_factory.PluginServiceFactory(), [ServiceType.SETTINGS_SERVICE]),
         (store_factory.StoreServiceFactory(), [ServiceType.SETTINGS_SERVICE]),
         (
-            credentials_factory.CredentialServiceFactory(),
+            credentials_factory.VariableServiceFactory(),
             [ServiceType.SETTINGS_SERVICE],
         ),
         (
@@ -191,14 +186,7 @@ def initialize_session_service():
     """
     Initialize the session manager.
     """
-    from langflow.services.cache import factory as cache_factory
-    from langflow.services.session import (
-        factory as session_service_factory,
-    )  # type: ignore
-
-    initialize_settings_service()
-
-    service_manager.register_factory(cache_factory.CacheServiceFactory(), dependencies=[ServiceType.SETTINGS_SERVICE])
+    from langflow.services.session import factory as session_service_factory
 
     service_manager.register_factory(
         session_service_factory.SessionServiceFactory(),
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 93931f0869..3c2425f589 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -863,7 +863,7 @@ export async function getGlobalVariables(): Promise<{
   [key: string]: { id: string; provider: string };
 }> {
   const globalVariables = {};
-  (await api.get(`${BASE_URL_API}credentials/`)).data.forEach((element) => {
+  (await api.get(`${BASE_URL_API}variables/`)).data.forEach((element) => {
     globalVariables[element.name] = {
       id: element.id,
       provider: element.provider,
@@ -881,7 +881,7 @@ export async function registerGlobalVariable({
   value: string;
   provider?: string;
 }): Promise<AxiosResponse<{ name: string; id: string; provider: string }>> {
-  return await api.post(`${BASE_URL_API}credentials/`, {
+  return await api.post(`${BASE_URL_API}variables/`, {
     name,
     value,
     provider,
@@ -889,7 +889,7 @@ export async function registerGlobalVariable({
 }
 
 export async function deleteGlobalVariable(id: string) {
-  api.delete(`${BASE_URL_API}credentials/${id}`);
+  api.delete(`${BASE_URL_API}variables/${id}`);
 }
 
 export async function updateGlobalVariable(
@@ -897,7 +897,7 @@ export async function updateGlobalVariable(
   value: string,
   id: string
 ) {
-  api.patch(`${BASE_URL_API}credentials/${id}`, {
+  api.patch(`${BASE_URL_API}variables/${id}`, {
     name,
     value,
   });

From 6d258a78ea626be2fd453be479c17e9c75826861 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 25 Mar 2024 09:47:54 -0300
Subject: [PATCH 57/83] Add variables_router to APIRouter

---
 src/backend/langflow/api/router.py            |  1 +
 .../custom_component/custom_component.py      |  7 ++-
 .../database/models/variable/model.py         | 46 +++++++++++++++++++
 3 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 src/backend/langflow/services/database/models/variable/model.py

diff --git a/src/backend/langflow/api/router.py b/src/backend/langflow/api/router.py
index ae221435a3..569014acf5 100644
--- a/src/backend/langflow/api/router.py
+++ b/src/backend/langflow/api/router.py
@@ -12,6 +12,7 @@
     store_router,
     users_router,
     validate_router,
+    variables_router,
 )
 
 router = APIRouter(
diff --git a/src/backend/langflow/interface/custom/custom_component/custom_component.py b/src/backend/langflow/interface/custom/custom_component/custom_component.py
index 1cc1a514c0..d15622a613 100644
--- a/src/backend/langflow/interface/custom/custom_component/custom_component.py
+++ b/src/backend/langflow/interface/custom/custom_component/custom_component.py
@@ -1,7 +1,6 @@
 import operator
 from pathlib import Path
-from typing import (TYPE_CHECKING, Any, Callable, ClassVar, List, Optional,
-                    Sequence, Union)
+from typing import TYPE_CHECKING, Any, Callable, ClassVar, List, Optional, Sequence, Union
 from uuid import UUID
 
 import yaml
@@ -12,14 +11,14 @@
 
 from langflow.interface.custom.code_parser.utils import (
     extract_inner_type_from_generic_alias,
-    extract_union_types_from_generic_alias)
+    extract_union_types_from_generic_alias,
+)
 from langflow.interface.custom.custom_component.component import Component
 from langflow.schema import Record
 from langflow.schema.dotdict import dotdict
 from langflow.services.database.models.flow import Flow
 from langflow.services.database.utils import session_getter
 from langflow.services.deps import get_db_service, get_storage_service, get_variable_service
-                                    get_variable_service)
 from langflow.services.storage.service import StorageService
 from langflow.utils import validate
 
diff --git a/src/backend/langflow/services/database/models/variable/model.py b/src/backend/langflow/services/database/models/variable/model.py
new file mode 100644
index 0000000000..93b74b28e9
--- /dev/null
+++ b/src/backend/langflow/services/database/models/variable/model.py
@@ -0,0 +1,46 @@
+from datetime import UTC, datetime
+from typing import TYPE_CHECKING, Optional
+from uuid import UUID, uuid4
+
+from sqlmodel import Field, Relationship, SQLModel
+
+
+if TYPE_CHECKING:
+    from langflow.services.database.models.user.model import User
+
+
+def utc_now():
+    return datetime.now(UTC)
+
+
+class VariableBase(SQLModel):
+    name: Optional[str] = Field(None, description="Name of the variable")
+    value: Optional[str] = Field(None, description="Encrypted value of the variable")
+    type: Optional[str] = Field(None, description="Type of the variable")
+
+
+class Variable(VariableBase, table=True):
+    id: Optional[UUID] = Field(default_factory=uuid4, primary_key=True, description="Unique ID for the variable")
+    # name is unique per user
+    created_at: datetime = Field(default_factory=utc_now, description="Creation time of the variable")
+    updated_at: Optional[datetime] = Field(None, description="Last update time of the variable")
+    # 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")
+
+
+class VariableCreate(VariableBase):
+    # AcceptedProviders is a custom Enum
+    type: Optional[str] = Field(None, description="Type of the variable")
+
+
+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")
+
+
+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")

From 8292cb8cfa635cc3943202af33e3bacc5f05a8d2 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 25 Mar 2024 09:59:10 -0300
Subject: [PATCH 58/83] Update global variable type in API and store

---
 src/frontend/src/controllers/API/index.ts            | 12 ++++++------
 src/frontend/src/stores/globalVariables.ts           |  4 ++--
 .../src/types/zustand/globalVariables/index.ts       |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 3c2425f589..52082abd96 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -860,13 +860,13 @@ export async function requestLogout() {
 }
 
 export async function getGlobalVariables(): Promise<{
-  [key: string]: { id: string; provider: string };
+  [key: string]: { id: string; type: string };
 }> {
   const globalVariables = {};
   (await api.get(`${BASE_URL_API}variables/`)).data.forEach((element) => {
     globalVariables[element.name] = {
       id: element.id,
-      provider: element.provider,
+      type: element.type,
     };
   });
   return globalVariables;
@@ -875,16 +875,16 @@ export async function getGlobalVariables(): Promise<{
 export async function registerGlobalVariable({
   name,
   value,
-  provider,
+  type,
 }: {
   name: string;
   value: string;
-  provider?: string;
-}): Promise<AxiosResponse<{ name: string; id: string; provider: string }>> {
+  type?: string;
+}): Promise<AxiosResponse<{ name: string; id: string; type: string }>> {
   return await api.post(`${BASE_URL_API}variables/`, {
     name,
     value,
-    provider,
+    type,
   });
 }
 
diff --git a/src/frontend/src/stores/globalVariables.ts b/src/frontend/src/stores/globalVariables.ts
index e3b8cc7344..e2f3e37df6 100644
--- a/src/frontend/src/stores/globalVariables.ts
+++ b/src/frontend/src/stores/globalVariables.ts
@@ -11,8 +11,8 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
         globalVariablesEntries: Object.keys(variables),
       });
     },
-    addGlobalVariable: (name, id, provider) => {
-      const data = { id, provider };
+    addGlobalVariable: (name, id, type) => {
+      const data = { id, type };
       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 e50e85ba42..3e651179e1 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; provider?: string } };
+  globalVariables: { [name: string]: { id: string; type?: string } };
   setGlobalVariables: (variables: {
-    [name: string]: { id: string; provider?: string };
+    [name: string]: { id: string; type?: string };
   }) => void;
-  addGlobalVariable: (name: string, id: string, provider?: string) => void;
+  addGlobalVariable: (name: string, id: string, type?: string) => void;
   removeGlobalVariable: (name: string) => void;
   getVariableId: (name: string) => string | undefined;
 };

From f8bd698848e70b46780c6e5e589974ac9ba2b1f3 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 25 Mar 2024 16:52:57 -0300
Subject: [PATCH 59/83] Remove UTC import and fix datetime function call

---
 .../langflow/services/database/models/variable/model.py       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/services/database/models/variable/model.py b/src/backend/langflow/services/database/models/variable/model.py
index 93b74b28e9..c35f179bfe 100644
--- a/src/backend/langflow/services/database/models/variable/model.py
+++ b/src/backend/langflow/services/database/models/variable/model.py
@@ -1,4 +1,4 @@
-from datetime import UTC, datetime
+from datetime import datetime
 from typing import TYPE_CHECKING, Optional
 from uuid import UUID, uuid4
 
@@ -10,7 +10,7 @@
 
 
 def utc_now():
-    return datetime.now(UTC)
+    return datetime.now(datetime.UTC)
 
 
 class VariableBase(SQLModel):

From dc531de20a0f29238bfd20730377b408d88225a7 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 25 Mar 2024 17:06:43 -0300
Subject: [PATCH 60/83] fix datetime utc for python<3.11

---
 .../langflow/services/database/models/variable/model.py       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/services/database/models/variable/model.py b/src/backend/langflow/services/database/models/variable/model.py
index c35f179bfe..3b9e6b2eb0 100644
--- a/src/backend/langflow/services/database/models/variable/model.py
+++ b/src/backend/langflow/services/database/models/variable/model.py
@@ -1,4 +1,4 @@
-from datetime import datetime
+from datetime import datetime,timezone
 from typing import TYPE_CHECKING, Optional
 from uuid import UUID, uuid4
 
@@ -10,7 +10,7 @@
 
 
 def utc_now():
-    return datetime.now(datetime.UTC)
+    return datetime.now(timezone.utc)
 
 
 class VariableBase(SQLModel):

From bb3461cf813b791af74e0d8f9202c617b42cb50d Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 25 Mar 2024 17:35:50 -0300
Subject: [PATCH 61/83] Refactor Variable model in database

---
 .../database/models/variable/model.py         | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/backend/langflow/services/database/models/variable/model.py b/src/backend/langflow/services/database/models/variable/model.py
index 3b9e6b2eb0..5ad2af23b1 100644
--- a/src/backend/langflow/services/database/models/variable/model.py
+++ b/src/backend/langflow/services/database/models/variable/model.py
@@ -20,17 +20,26 @@ class VariableBase(SQLModel):
 
 
 class Variable(VariableBase, table=True):
-    id: Optional[UUID] = Field(default_factory=uuid4, primary_key=True, description="Unique ID for the variable")
+    id: Optional[UUID] = Field(
+        default_factory=uuid4,
+        primary_key=True,
+        description="Unique ID for the variable",
+    )
     # name is unique per user
-    created_at: datetime = Field(default_factory=utc_now, description="Creation time of the variable")
-    updated_at: Optional[datetime] = Field(None, description="Last update time of the variable")
+    created_at: datetime = Field(
+        default_factory=utc_now, description="Creation time of the variable"
+    )
+    updated_at: Optional[datetime] = Field(
+        None, description="Last update time of the variable"
+    )
     # foreign key to user table
-    user_id: UUID = Field(description="User ID associated with this variable", foreign_key="user.id")
+    user_id: UUID = Field(
+        description="User ID associated with this variable", foreign_key="user.id"
+    )
     user: "User" = Relationship(back_populates="variables")
 
 
 class VariableCreate(VariableBase):
-    # AcceptedProviders is a custom Enum
     type: Optional[str] = Field(None, description="Type of the variable")
 
 

From 0175fc4b06b51c6579520e0fcc3c70b427abfd52 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 13:49:39 -0300
Subject: [PATCH 62/83] Add support for loading template field from the
 database

---
 src/backend/langflow/api/utils.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/backend/langflow/api/utils.py b/src/backend/langflow/api/utils.py
index d576db9527..c03a724a70 100644
--- a/src/backend/langflow/api/utils.py
+++ b/src/backend/langflow/api/utils.py
@@ -125,6 +125,9 @@ def update_template_field(frontend_template, key, value_dict):
             template_field["value"] = ""
         template_field["file_path"] = file_path_value
 
+    if "load_from_db" in value_dict and value_dict["load_from_db"]:
+        template_field["load_from_db"] = value_dict["load_from_db"]
+
 
 def get_file_path_value(file_path):
     """Get the file path value if the file exists, else return empty string."""

From f741b97ac505002a7030919741908629ca6e9717 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 13:53:49 -0300
Subject: [PATCH 63/83] Fix capitalization in error messages

---
 src/backend/langflow/field_typing/range_spec.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/langflow/field_typing/range_spec.py b/src/backend/langflow/field_typing/range_spec.py
index 036d21fa9c..b81cf7a222 100644
--- a/src/backend/langflow/field_typing/range_spec.py
+++ b/src/backend/langflow/field_typing/range_spec.py
@@ -10,12 +10,12 @@ class RangeSpec(BaseModel):
     @classmethod
     def max_must_be_greater_than_min(cls, v, values, **kwargs):
         if "min" in values.data and v <= values.data["min"]:
-            raise ValueError("max must be greater than min")
+            raise ValueError("Max must be greater than min")
         return v
 
     @field_validator("step")
     @classmethod
     def step_must_be_positive(cls, v):
         if v <= 0:
-            raise ValueError("step must be positive")
+            raise ValueError("Step must be positive")
         return v

From 5db74fbf5aa6cd6d6d491e63c381988c38943bfe Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 26 Mar 2024 21:50:44 +0200
Subject: [PATCH 64/83] Changed provider to type and hid field

---
 .../addNewVariableButton.tsx                  | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 6e77b67f62..2f0f3ec06d 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -16,25 +16,25 @@ import { Textarea } from "../ui/textarea";
 export default function AddNewVariableButton({ children }): JSX.Element {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
-  const [provider, setProvider] = useState("");
+  const [type, setType] = useState("");
   const [open, setOpen] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const addGlobalVariable = useGlobalVariablesStore(
     (state) => state.addGlobalVariable
   );
   function handleSaveVariable() {
-    let data: { name: string; value: string; provider?: string } = {
+    let data: { name: string; value: string; type?: string } = {
       name: key,
       value,
     };
-    if (provider) data = { ...data, provider };
+    if (type) data = { ...data, type };
     registerGlobalVariable(data)
       .then((res) => {
-        const { name, id, provider } = res.data;
-        addGlobalVariable(name, id, provider);
+        const { name, id, type } = res.data;
+        addGlobalVariable(name, id, type);
         setKey("");
         setValue("");
-        setProvider("");
+        setType("");
         setOpen(false);
       })
       .catch((error) => {
@@ -62,7 +62,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col gap-4 align-middle">
-          <Label>Variable name </Label>
+          <Label>Variable Name</Label>
           <Input
             value={key}
             onChange={(e) => {
@@ -70,17 +70,17 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             }}
             placeholder="Insert a name for the variable..."
           ></Input>
-          <Label>Provider (optional) </Label>
+          {/* <Label>Type (optional) </Label>
           <InputComponent
             setSelectedOption={(e) => {
-              setProvider(e);
+              setType(e);
             }}
-            selectedOption={provider}
+            selectedOption={type}
             password={false}
             options={["OPENAI_API_KEY", "ANTHROPIC_API_KEY"]}
-            placeholder="Choose a provider between the environment variables..."
-          ></InputComponent>
-          <Label>Variable Value </Label>
+            placeholder="Choose a type between the environment variables..."
+          ></InputComponent> */}
+          <Label>Value</Label>
           <Textarea
             value={value}
             onChange={(e) => {

From 42739a29cfe0385f20203e7a211837e8b6f44fa4 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 26 Mar 2024 21:52:23 +0200
Subject: [PATCH 65/83] Added types

---
 .../addNewVariableButton.tsx                              | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 2f0f3ec06d..310115d903 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -70,16 +70,16 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             }}
             placeholder="Insert a name for the variable..."
           ></Input>
-          {/* <Label>Type (optional) </Label>
+          <Label>Type</Label>
           <InputComponent
             setSelectedOption={(e) => {
               setType(e);
             }}
             selectedOption={type}
             password={false}
-            options={["OPENAI_API_KEY", "ANTHROPIC_API_KEY"]}
-            placeholder="Choose a type between the environment variables..."
-          ></InputComponent> */}
+            options={["Variable", "Credential"]}
+            placeholder="Choose a type for the variable..."
+          ></InputComponent>
           <Label>Value</Label>
           <Textarea
             value={value}

From ae7d82748381a2544993e359d375f3f747db8691 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 26 Mar 2024 21:54:08 +0200
Subject: [PATCH 66/83] Fixed type to always exist

---
 .../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 310115d903..71fd1ad075 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -25,9 +25,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   function handleSaveVariable() {
     let data: { name: string; value: string; type?: string } = {
       name: key,
+      type,
       value,
     };
-    if (type) data = { ...data, type };
     registerGlobalVariable(data)
       .then((res) => {
         const { name, id, type } = res.data;

From 1315137ab802b5f6d1777043442d8d467aea0bf9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 26 Mar 2024 22:03:13 +0200
Subject: [PATCH 67/83] put optional label on type

---
 .../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 71fd1ad075..6c80a8acaa 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -70,7 +70,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
             }}
             placeholder="Insert a name for the variable..."
           ></Input>
-          <Label>Type</Label>
+          <Label>Type (optional)</Label>
           <InputComponent
             setSelectedOption={(e) => {
               setType(e);

From d123d5b64f7ba813555cc9f608e7faf76ca23d0c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 26 Mar 2024 22:28:42 +0200
Subject: [PATCH 68/83] Added editNode variable on global variables for inputs

---
 src/frontend/src/components/dropdownComponent/index.tsx    | 2 +-
 src/frontend/src/components/inputGlobalComponent/index.tsx | 2 ++
 src/frontend/src/modals/EditNodeModal/index.tsx            | 1 +
 src/frontend/src/types/components/index.ts                 | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 8f7adb3d4f..d51e81942d 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -37,7 +37,7 @@ export default function Dropdown({
           >
             {({ open }) => (
               <>
-                <div className={"relative mt-1"}>
+                <div className={"relative"}>
                   <Listbox.Button
                     data-test={`${id ?? ""}`}
                     className={
diff --git a/src/frontend/src/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/inputGlobalComponent/index.tsx
index bf6a5555ed..94df382ba4 100644
--- a/src/frontend/src/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/inputGlobalComponent/index.tsx
@@ -17,6 +17,7 @@ export default function InputGlobalComponent({
   setDb,
   name,
   data,
+  editNode = false,
 }: InputGlobalComponentType): JSX.Element {
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
@@ -70,6 +71,7 @@ export default function InputGlobalComponent({
   return (
     <InputComponent
       id={"input-" + name}
+      editNode={editNode}
       disabled={disabled}
       password={data.node?.template[name].password ?? false}
       value={data.node?.template[name].value ?? ""}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 2ea10fdc53..789b204da6 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -261,6 +261,7 @@ const EditNodeModal = forwardRef(
                                     ) : (
                                       <InputGlobalComponent
                                         disabled={disabled}
+                                        editNode={true}
                                         onChange={(value) =>
                                           handleOnNewValue(value, templateParam)
                                         }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index afa42d3120..aa5893dc24 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -78,6 +78,7 @@ export type InputGlobalComponentType =
     setDb: (value: boolean) => void,
     name: string,
     data: NodeDataType,
+    editNode?: boolean,
   };
 
 export type KeyPairListComponentType = {

From ff8c3d7a06a38d5b93d6ceae73de72d3902915ea Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 27 Mar 2024 01:18:21 +0200
Subject: [PATCH 69/83] Fixed input of global variables

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

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index fc33982d25..0675ee1983 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -346,6 +346,7 @@ export default function CodeTabsComponent({
                                                   </div>
                                                 ) : (
                                                   <InputGlobalComponent
+                                                    editNode={true}
                                                     disabled={false}
                                                     onChange={(target) => {
                                                       if (node.data) {

From 0385cfbce1128b8e423cecd7dbe6435b32466849 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 20:34:36 -0300
Subject: [PATCH 70/83] Add setup_devcontainer target to Makefile

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

diff --git a/Makefile b/Makefile
index e4494e1c56..dee04736f1 100644
--- a/Makefile
+++ b/Makefile
@@ -77,6 +77,7 @@ ifdef env
 else
     poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file .env
 endif
+
 setup_devcontainer:
 	make init
 	make build_frontend

From 00322edda296e92ac45ddeaa2bc91a947c918d1a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 20:35:31 -0300
Subject: [PATCH 71/83] Refactor Makefile to include conditional statements for
 environment variables

---
 Makefile | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/Makefile b/Makefile
index dee04736f1..96b58f62c2 100644
--- a/Makefile
+++ b/Makefile
@@ -59,11 +59,11 @@ run_cli:
 	@make build_frontend > /dev/null
 	@echo 'Install backend dependencies'
 	@make install_backend > /dev/null
-ifdef env
-	poetry run langflow run --path src/frontend/build --host $(host) --port $(port) --env-file $(env)
-else
-	poetry run langflow run --path src/frontend/build --host $(host) --port $(port) --env-file .env
-endif
+	ifdef env
+		poetry run langflow run --path src/frontend/build --host $(host) --port $(port) --env-file $(env)
+	else
+		poetry run langflow run --path src/frontend/build --host $(host) --port $(port) --env-file .env
+	endif
 
 run_cli_debug:
 	@echo 'Running the CLI in debug mode'
@@ -72,11 +72,12 @@ run_cli_debug:
 	@make build_frontend > /dev/null
 	@echo 'Install backend dependencies'
 	@make install_backend > /dev/null
-ifdef env
-    poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file $(env)
-else
-    poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file .env
-endif
+	ifdef env
+		poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file $(env)
+	else
+		poetry run langflow run --path src/frontend/build --log-level debug --host $(host) --port $(port) --env-file .env
+	endif
+
 
 setup_devcontainer:
 	make init

From 532615533ad14d17a0aa006cc9d356039b1fab04 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 20:40:03 -0300
Subject: [PATCH 72/83] Add VariableService and related files

---
 src/backend/base/langflow/graph/vertex/base.py         | 10 ++--------
 src/backend/base/langflow/services/deps.py             |  2 +-
 .../services/{credentials => variable}/__init__.py     |  0
 .../services/{credentials => variable}/factory.py      |  2 +-
 .../services/{credentials => variable}/service.py      |  0
 5 files changed, 4 insertions(+), 10 deletions(-)
 rename src/backend/base/langflow/services/{credentials => variable}/__init__.py (100%)
 rename src/backend/base/langflow/services/{credentials => variable}/factory.py (85%)
 rename src/backend/base/langflow/services/{credentials => variable}/service.py (100%)

diff --git a/src/backend/base/langflow/graph/vertex/base.py b/src/backend/base/langflow/graph/vertex/base.py
index c2968df2a1..f3891bb757 100644
--- a/src/backend/base/langflow/graph/vertex/base.py
+++ b/src/backend/base/langflow/graph/vertex/base.py
@@ -4,20 +4,14 @@
 import types
 from enum import Enum
 from typing import TYPE_CHECKING, Any, AsyncIterator, Callable, Dict, Iterator, List, Optional
-
 from loguru import logger
 
-from langflow.graph.schema import (
-    INPUT_COMPONENTS,
-    INPUT_FIELD_NAME,
-    OUTPUT_COMPONENTS,
-    InterfaceComponentTypes,
-    ResultData,
-)
+from langflow.graph.schema import INPUT_COMPONENTS, OUTPUT_COMPONENTS, InterfaceComponentTypes, ResultData
 from langflow.graph.utils import UnbuiltObject, UnbuiltResult
 from langflow.graph.vertex.utils import generate_result
 from langflow.interface.initialize import loading
 from langflow.interface.listing import lazy_load_dict
+from langflow.schema.schema import INPUT_FIELD_NAME
 from langflow.services.deps import get_storage_service
 from langflow.utils.constants import DIRECT_TYPES
 from langflow.utils.schemas import ChatOutputResponse
diff --git a/src/backend/base/langflow/services/deps.py b/src/backend/base/langflow/services/deps.py
index e1cc0c2c27..ec3a5ec845 100644
--- a/src/backend/base/langflow/services/deps.py
+++ b/src/backend/base/langflow/services/deps.py
@@ -8,7 +8,6 @@
 
     from langflow.services.cache.service import CacheService
     from langflow.services.chat.service import ChatService
-    from langflow.services.credentials.service import VariableService
     from langflow.services.database.service import DatabaseService
     from langflow.services.monitor.service import MonitorService
     from langflow.services.plugins.service import PluginService
@@ -18,6 +17,7 @@
     from langflow.services.storage.service import StorageService
     from langflow.services.store.service import StoreService
     from langflow.services.task.service import TaskService
+    from langflow.services.variable.service import VariableService
 
 
 def get_socket_service() -> "SocketIOService":
diff --git a/src/backend/base/langflow/services/credentials/__init__.py b/src/backend/base/langflow/services/variable/__init__.py
similarity index 100%
rename from src/backend/base/langflow/services/credentials/__init__.py
rename to src/backend/base/langflow/services/variable/__init__.py
diff --git a/src/backend/base/langflow/services/credentials/factory.py b/src/backend/base/langflow/services/variable/factory.py
similarity index 85%
rename from src/backend/base/langflow/services/credentials/factory.py
rename to src/backend/base/langflow/services/variable/factory.py
index 24a652c4e4..aac384807e 100644
--- a/src/backend/base/langflow/services/credentials/factory.py
+++ b/src/backend/base/langflow/services/variable/factory.py
@@ -1,7 +1,7 @@
 from typing import TYPE_CHECKING
 
-from langflow.services.credentials.service import VariableService
 from langflow.services.factory import ServiceFactory
+from langflow.services.variable.service import VariableService
 
 if TYPE_CHECKING:
     from langflow.services.settings.service import SettingsService
diff --git a/src/backend/base/langflow/services/credentials/service.py b/src/backend/base/langflow/services/variable/service.py
similarity index 100%
rename from src/backend/base/langflow/services/credentials/service.py
rename to src/backend/base/langflow/services/variable/service.py

From 16e91a00de32a657c074b88a4ec54abf9f371850 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 21:24:17 -0300
Subject: [PATCH 73/83] Update mypy configuration to include namespace packages

---
 Makefile                           | 2 +-
 src/backend/base/langflow/py.typed | 0
 src/backend/base/pyproject.toml    | 8 +++++++-
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 src/backend/base/langflow/py.typed

diff --git a/Makefile b/Makefile
index 96b58f62c2..256436af49 100644
--- a/Makefile
+++ b/Makefile
@@ -32,7 +32,7 @@ format:
 
 lint:
 	make install_backend
-	poetry run mypy src/backend
+	poetry run mypy --namespace-packages -p "langflow"
 	poetry run ruff . --fix
 
 install_frontend:
diff --git a/src/backend/base/langflow/py.typed b/src/backend/base/langflow/py.typed
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/backend/base/pyproject.toml b/src/backend/base/pyproject.toml
index b783807a63..d32780505c 100644
--- a/src/backend/base/pyproject.toml
+++ b/src/backend/base/pyproject.toml
@@ -17,10 +17,11 @@ repository = "https://github.com/logspace-ai/langflow"
 license = "MIT"
 readme = "README.md"
 keywords = ["nlp", "langchain", "openai", "gpt", "gui"]
-packages = [{ include = "langflow" }]
+packages = [{ include = "langflow" }, { include = "py.typed" }]
 include = ["pyproject.toml", "README.md", "langflow/**/*"]
 documentation = "https://docs.langflow.org"
 
+
 [tool.poetry.scripts]
 langflow-base = "langflow.__main__:main"
 
@@ -106,6 +107,11 @@ filterwarnings = ["ignore::DeprecationWarning"]
 log_cli = true
 markers = ["async_test"]
 
+[tool.mypy]
+namespace_packages = true
+mypy_path = "langflow"
+ignore_missing_imports = true
+
 
 [tool.ruff]
 exclude = ["src/backend/langflow/alembic/*"]

From a92dcaf37db2863b9a81b74b182fcfc0cd5d90e7 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 21:24:33 -0300
Subject: [PATCH 74/83] Update agent.py and experimental components

---
 src/backend/base/langflow/base/agents/agent.py                | 4 +++-
 src/backend/base/langflow/components/experimental/__init__.py | 4 ++--
 .../base/langflow/services/database/models/flow/model.py      | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/backend/base/langflow/base/agents/agent.py b/src/backend/base/langflow/base/agents/agent.py
index 029ab4913b..d0ce82d767 100644
--- a/src/backend/base/langflow/base/agents/agent.py
+++ b/src/backend/base/langflow/base/agents/agent.py
@@ -1,6 +1,8 @@
 from typing import List, Union
 
 from langchain.agents import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
+from langchain_core.runnables import Runnable
+
 from langflow.field_typing import BaseMemory, Text, Tool
 from langflow.interface.custom.custom_component import CustomComponent
 
@@ -38,7 +40,7 @@ def build_config(self):
 
     async def run_agent(
         self,
-        agent: Union[BaseSingleActionAgent, BaseMultiActionAgent, AgentExecutor],
+        agent: Union[Runnable, BaseSingleActionAgent, BaseMultiActionAgent, AgentExecutor],
         inputs: str,
         input_variables: list[str],
         tools: List[Tool],
diff --git a/src/backend/base/langflow/components/experimental/__init__.py b/src/backend/base/langflow/components/experimental/__init__.py
index d23a731063..2d59a063da 100644
--- a/src/backend/base/langflow/components/experimental/__init__.py
+++ b/src/backend/base/langflow/components/experimental/__init__.py
@@ -1,6 +1,6 @@
 from .ClearMessageHistory import ClearMessageHistoryComponent
 from .ExtractDataFromRecord import ExtractKeyFromRecordComponent
-from .Listen import GetNotifiedComponent
+from .Listen import ListenComponent
 from .ListFlows import ListFlowsComponent
 from .MergeRecords import MergeRecordsComponent
 from .Notify import NotifyComponent
@@ -11,7 +11,7 @@
 __all__ = [
     "ClearMessageHistoryComponent",
     "ExtractKeyFromRecordComponent",
-    "GetNotifiedComponent",
+    "ListenComponent",
     "ListFlowsComponent",
     "MergeRecordsComponent",
     "MessageHistoryComponent",
diff --git a/src/backend/base/langflow/services/database/models/flow/model.py b/src/backend/base/langflow/services/database/models/flow/model.py
index 95311909c2..cbfdec563c 100644
--- a/src/backend/base/langflow/services/database/models/flow/model.py
+++ b/src/backend/base/langflow/services/database/models/flow/model.py
@@ -1,4 +1,4 @@
-# Path: src/backend/langflow/database/models/flow.py
+# Path: src/backend/langflow/services/database/models/flow/model.py
 
 from datetime import datetime
 from typing import TYPE_CHECKING, Dict, Optional

From 257f802277e13a078ec1c61a29a3657ab6fd2653 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 21:28:40 -0300
Subject: [PATCH 75/83] Update function signature and import statements

---
 src/backend/base/langflow/alembic/helpers/flow.py           | 2 +-
 src/backend/base/langflow/components/agents/XMLAgent.py     | 4 ++--
 .../base/langflow/components/models/AzureOpenAIModel.py     | 6 ++----
 .../base/langflow/components/vectorstores/AstraDBSearch.py  | 2 +-
 .../components/vectorstores/MongoDBAtlasVectorSearch.py     | 2 +-
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/backend/base/langflow/alembic/helpers/flow.py b/src/backend/base/langflow/alembic/helpers/flow.py
index 328e99ca16..cfd3272d96 100644
--- a/src/backend/base/langflow/alembic/helpers/flow.py
+++ b/src/backend/base/langflow/alembic/helpers/flow.py
@@ -178,7 +178,7 @@ def get_flow_inputs(graph: "Graph") -> List["Vertex"]:
     return inputs
 
 
-def build_schema_from_inputs(name: str, inputs: List[tuple[str, str, str]]) -> BaseModel:
+def build_schema_from_inputs(name: str, inputs: List["Vertex"]) -> BaseModel:
     """
     Builds a schema from the given inputs.
 
diff --git a/src/backend/base/langflow/components/agents/XMLAgent.py b/src/backend/base/langflow/components/agents/XMLAgent.py
index efd5cc0105..687bfff6fc 100644
--- a/src/backend/base/langflow/components/agents/XMLAgent.py
+++ b/src/backend/base/langflow/components/agents/XMLAgent.py
@@ -1,4 +1,4 @@
-from typing import List
+from typing import List, Optional
 
 from langchain.agents import create_xml_agent
 from langchain_core.prompts import PromptTemplate
@@ -69,7 +69,7 @@ async def build(
         llm: BaseLLM,
         tools: List[Tool],
         prompt: str,
-        memory: BaseMemory = None,
+        memory: Optional[BaseMemory] = None,
         tool_template: str = "{name}: {description}",
         handle_parsing_errors: bool = True,
     ) -> Text:
diff --git a/src/backend/base/langflow/components/models/AzureOpenAIModel.py b/src/backend/base/langflow/components/models/AzureOpenAIModel.py
index eeb488f039..58cc3f2c26 100644
--- a/src/backend/base/langflow/components/models/AzureOpenAIModel.py
+++ b/src/backend/base/langflow/components/models/AzureOpenAIModel.py
@@ -2,7 +2,6 @@
 
 from langchain.llms.base import BaseLanguageModel
 from langchain_openai import AzureChatOpenAI
-from pydantic.v1 import SecretStr
 
 from langflow.base.models.model import LCModelComponent
 from langflow.field_typing import Text
@@ -91,21 +90,20 @@ def build(
         azure_endpoint: str,
         input_value: Text,
         azure_deployment: str,
-        api_key: str,
         api_version: str,
+        api_key: Optional[str] = None,
         system_message: Optional[str] = None,
         temperature: float = 0.7,
         max_tokens: Optional[int] = 1000,
         stream: bool = False,
     ) -> BaseLanguageModel:
-        secret_api_key = SecretStr(api_key)
         try:
             output = AzureChatOpenAI(
                 model=model,
                 azure_endpoint=azure_endpoint,
                 azure_deployment=azure_deployment,
                 api_version=api_version,
-                api_key=secret_api_key,
+                api_key=api_key,
                 temperature=temperature,
                 max_tokens=max_tokens,
             )
diff --git a/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py b/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
index 8432f01f15..e358eeae49 100644
--- a/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
+++ b/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
@@ -74,7 +74,7 @@ def build(
         self,
         embedding: Embeddings,
         collection_name: str,
-        input_value: Optional[Text] = None,
+        input_value: Text,
         search_type: str = "Similarity",
         token: Optional[str] = None,
         api_endpoint: Optional[str] = None,
diff --git a/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py b/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
index 10b69ce153..9ccd80a275 100644
--- a/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
+++ b/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
@@ -38,7 +38,7 @@ def build(  # type: ignore[override]
     ) -> List[Record]:
         search_kwargs = search_kwargs or {}
         vector_store = super().build(
-            connection_string=mongodb_atlas_cluster_uri,
+            mongodb_atlas_cluster_uri=mongodb_atlas_cluster_uri,
             namespace=f"{db_name}.{collection_name}",
             embedding=embedding,
             index_name=index_name,

From d54e4504f9a7662c92038d884388bd2c9d8f4fca Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 21:48:48 -0300
Subject: [PATCH 76/83] Refactor code and fix bugs

---
 src/backend/base/langflow/__main__.py         |  6 +--
 .../base/langflow/alembic/helpers/flow.py     |  2 +
 .../base/langflow/base/agents/agent.py        |  8 ++--
 .../base/langflow/base/models/model.py        |  6 +--
 .../graph/graph/runnable_vertices_manager.py  |  4 +-
 src/backend/base/langflow/helpers/flow.py     | 12 +++--
 src/backend/base/langflow/services/factory.py |  4 +-
 .../base/langflow/services/settings/auth.py   |  7 +--
 src/backend/langflow/base/agents/agent.py     |  4 +-
 src/backend/langflow/base/models/__init__.py  |  3 --
 src/backend/langflow/base/models/model.py     | 48 -------------------
 .../components/experimental/FlowTool.py       |  5 +-
 .../components/tools/SearchAPITool.py         |  3 +-
 13 files changed, 33 insertions(+), 79 deletions(-)
 delete mode 100644 src/backend/langflow/base/models/__init__.py
 delete mode 100644 src/backend/langflow/base/models/model.py

diff --git a/src/backend/base/langflow/__main__.py b/src/backend/base/langflow/__main__.py
index 356a7e7cd4..5acc85b730 100644
--- a/src/backend/base/langflow/__main__.py
+++ b/src/backend/base/langflow/__main__.py
@@ -9,9 +9,9 @@
 import httpx
 import typer
 from dotenv import load_dotenv
-from multiprocess import (
-    Process,  # type: ignore
-    cpu_count,  # type: ignore
+from multiprocess import (  # noqa
+    Process,  # noqa
+    cpu_count,  # noqa; type: ignore
 )
 from rich import box
 from rich import print as rprint
diff --git a/src/backend/base/langflow/alembic/helpers/flow.py b/src/backend/base/langflow/alembic/helpers/flow.py
index cfd3272d96..1b91e158fe 100644
--- a/src/backend/base/langflow/alembic/helpers/flow.py
+++ b/src/backend/base/langflow/alembic/helpers/flow.py
@@ -69,6 +69,8 @@ async def run_flow(
     flow_name: Optional[str] = None,
     user_id: Optional[str] = None,
 ) -> Any:
+    if not user_id:
+        raise ValueError("Session is invalid")
     graph = await load_flow(user_id, flow_id, flow_name, tweaks)
 
     if inputs is None:
diff --git a/src/backend/base/langflow/base/agents/agent.py b/src/backend/base/langflow/base/agents/agent.py
index d0ce82d767..431ddfa4f2 100644
--- a/src/backend/base/langflow/base/agents/agent.py
+++ b/src/backend/base/langflow/base/agents/agent.py
@@ -1,6 +1,6 @@
-from typing import List, Union
+from typing import List, Optional, Union
 
-from langchain.agents import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
+from langchain.agents.agent import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent, RunnableMultiActionAgent
 from langchain_core.runnables import Runnable
 
 from langflow.field_typing import BaseMemory, Text, Tool
@@ -44,12 +44,14 @@ async def run_agent(
         inputs: str,
         input_variables: list[str],
         tools: List[Tool],
-        memory: BaseMemory = None,
+        memory: Optional[BaseMemory] = None,
         handle_parsing_errors: bool = True,
         output_key: str = "output",
     ) -> Text:
         if isinstance(agent, AgentExecutor):
             runnable = agent
+        elif isinstance(agent, Runnable):
+            runnable = RunnableMultiActionAgent(runnable=agent, stream_runnable=False)
         else:
             runnable = AgentExecutor.from_agent_and_tools(
                 agent=agent, tools=tools, verbose=True, memory=memory, handle_parsing_errors=handle_parsing_errors
diff --git a/src/backend/base/langflow/base/models/model.py b/src/backend/base/langflow/base/models/model.py
index 4e3a422b2b..a6ed0ccaf1 100644
--- a/src/backend/base/langflow/base/models/model.py
+++ b/src/backend/base/langflow/base/models/model.py
@@ -4,7 +4,7 @@
 from langchain_core.language_models.llms import LLM
 from langchain_core.messages import HumanMessage, SystemMessage
 
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow.custom import CustomComponent
 
 
 class LCModelComponent(CustomComponent):
@@ -35,10 +35,10 @@ def get_chat_result(
         self, runnable: BaseChatModel, stream: bool, input_value: str, system_message: Optional[str] = None
     ):
         messages = []
-        if system_message:
-            messages.append(SystemMessage(system_message))
         if input_value:
             messages.append(HumanMessage(input_value))
+        if system_message:
+            messages.append(SystemMessage(system_message))
         if stream:
             result = runnable.stream(messages)
         else:
diff --git a/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py b/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
index 3fa9d3e913..79593cee3f 100644
--- a/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
+++ b/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
@@ -1,6 +1,6 @@
 import asyncio
 from collections import defaultdict
-from typing import TYPE_CHECKING, Coroutine, List
+from typing import TYPE_CHECKING, Awaitable, Callable, List
 
 if TYPE_CHECKING:
     from langflow.graph.graph.base import Graph
@@ -55,7 +55,7 @@ def update_vertex_run_state(self, vertex_id: str, is_runnable: bool):
     async def get_next_runnable_vertices(
         self,
         lock: asyncio.Lock,
-        set_cache_coro: Coroutine,
+        set_cache_coro: Callable[["Graph", asyncio.Lock], Awaitable[None]],
         graph: "Graph",
         vertex: "Vertex",
     ):
diff --git a/src/backend/base/langflow/helpers/flow.py b/src/backend/base/langflow/helpers/flow.py
index 328e99ca16..9d36ff1d1c 100644
--- a/src/backend/base/langflow/helpers/flow.py
+++ b/src/backend/base/langflow/helpers/flow.py
@@ -1,4 +1,4 @@
-from typing import TYPE_CHECKING, Any, Callable, Coroutine, List, Optional, Tuple, Union
+from typing import TYPE_CHECKING, Any, Coroutine, List, Optional, Tuple, Union
 
 from pydantic.v1 import BaseModel, Field, create_model
 from sqlmodel import select
@@ -69,6 +69,8 @@ async def run_flow(
     flow_name: Optional[str] = None,
     user_id: Optional[str] = None,
 ) -> Any:
+    if not user_id:
+        raise ValueError("Session is invalid")
     graph = await load_flow(user_id, flow_id, flow_name, tweaks)
 
     if inputs is None:
@@ -77,7 +79,7 @@ async def run_flow(
     inputs_components = []
     types = []
     for input_dict in inputs:
-        inputs_list.append({INPUT_FIELD_NAME: input_dict.get("input_value")})
+        inputs_list.append({INPUT_FIELD_NAME: input_dict.get("input_value", "")})
         inputs_components.append(input_dict.get("components", []))
         types.append(input_dict.get("type", []))
 
@@ -138,12 +140,12 @@ async def flow_function({func_args}):
 """
 
     compiled_func = compile(func_body, "<string>", "exec")
-    local_scope = {}
+    local_scope: dict = {}
     exec(compiled_func, globals(), local_scope)
     return local_scope["flow_function"]
 
 
-def build_function_and_schema(flow_record: Record, graph: "Graph") -> Tuple[Callable, BaseModel]:
+def build_function_and_schema(flow_record: Record, graph: "Graph") -> Tuple[Coroutine, BaseModel]:
     """
     Builds a dynamic function and schema for a given flow.
 
@@ -178,7 +180,7 @@ def get_flow_inputs(graph: "Graph") -> List["Vertex"]:
     return inputs
 
 
-def build_schema_from_inputs(name: str, inputs: List[tuple[str, str, str]]) -> BaseModel:
+def build_schema_from_inputs(name: str, inputs: List["Vertex"]) -> BaseModel:
     """
     Builds a schema from the given inputs.
 
diff --git a/src/backend/base/langflow/services/factory.py b/src/backend/base/langflow/services/factory.py
index 4780b53c78..49bea7db24 100644
--- a/src/backend/base/langflow/services/factory.py
+++ b/src/backend/base/langflow/services/factory.py
@@ -23,7 +23,7 @@ def create(self, *args, **kwargs) -> "Service":
         raise self.service_class(*args, **kwargs)
 
 
-def hash_factory(factory: ServiceFactory) -> str:
+def hash_factory(factory: Type[ServiceFactory]) -> str:
     return factory.service_class.__name__
 
 
@@ -38,7 +38,7 @@ def hash_infer_service_types_args(factory_class: Type[ServiceFactory], available
 
 
 @cached(cache=LRUCache(maxsize=10), key=hash_infer_service_types_args)
-def infer_service_types(factory_class: Type[ServiceFactory], available_services=None) -> "ServiceType":
+def infer_service_types(factory_class: Type[ServiceFactory], available_services=None) -> list["ServiceType"]:
     create_method = factory_class.create
     type_hints = get_type_hints(create_method, globalns=available_services)
     service_types = []
diff --git a/src/backend/base/langflow/services/settings/auth.py b/src/backend/base/langflow/services/settings/auth.py
index 3dd92a04ab..37201bba07 100644
--- a/src/backend/base/langflow/services/settings/auth.py
+++ b/src/backend/base/langflow/services/settings/auth.py
@@ -1,5 +1,6 @@
 import secrets
 from pathlib import Path
+from typing import Literal
 
 from loguru import logger
 from passlib.context import CryptContext
@@ -14,7 +15,7 @@ class AuthSettings(BaseSettings):
     # Login settings
     CONFIG_DIR: str
     SECRET_KEY: SecretStr = Field(
-        default=None,
+        default="",
         description="Secret key for JWT. If not provided, a random one will be generated.",
         frozen=False,
     )
@@ -33,13 +34,13 @@ class AuthSettings(BaseSettings):
     SUPERUSER: str = DEFAULT_SUPERUSER
     SUPERUSER_PASSWORD: str = DEFAULT_SUPERUSER_PASSWORD
 
-    REFRESH_SAME_SITE: str = "none"
+    REFRESH_SAME_SITE: Literal["lax", "strict", "none"] = "none"
     """The SameSite attribute of the refresh token cookie."""
     REFRESH_SECURE: bool = True
     """The Secure attribute of the refresh token cookie."""
     REFRESH_HTTPONLY: bool = True
     """The HttpOnly attribute of the refresh token cookie."""
-    ACCESS_SAME_SITE: str = "none"
+    ACCESS_SAME_SITE: Literal["lax", "strict", "none"] = "none"
     """The SameSite attribute of the access token cookie."""
     ACCESS_SECURE: bool = True
     """The Secure attribute of the access token cookie."""
diff --git a/src/backend/langflow/base/agents/agent.py b/src/backend/langflow/base/agents/agent.py
index 8dac73e61c..b0c61f6e13 100644
--- a/src/backend/langflow/base/agents/agent.py
+++ b/src/backend/langflow/base/agents/agent.py
@@ -1,8 +1,8 @@
 from typing import List, Union
 
-from langchain.agents import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
+from langchain.agents import (AgentExecutor, BaseMultiActionAgent,
 
-from langflow import CustomComponent
+from langflow.custom import CustomComponent
 from langflow.field_typing import BaseMemory, Text, Tool
 
 
diff --git a/src/backend/langflow/base/models/__init__.py b/src/backend/langflow/base/models/__init__.py
deleted file mode 100644
index 921f10336a..0000000000
--- a/src/backend/langflow/base/models/__init__.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from .model import LCModelComponent
-
-__all__ = ["LCModelComponent"]
diff --git a/src/backend/langflow/base/models/model.py b/src/backend/langflow/base/models/model.py
deleted file mode 100644
index e2ab4b6cf8..0000000000
--- a/src/backend/langflow/base/models/model.py
+++ /dev/null
@@ -1,48 +0,0 @@
-from typing import Optional
-
-from langchain_core.language_models.chat_models import BaseChatModel
-from langchain_core.language_models.llms import LLM
-from langchain_core.messages import HumanMessage, SystemMessage
-
-from langflow import CustomComponent
-
-
-class LCModelComponent(CustomComponent):
-    display_name: str = "Model Name"
-    description: str = "Model Description"
-
-    def get_result(self, runnable: LLM, stream: bool, input_value: str):
-        """
-        Retrieves the result from the output of a Runnable object.
-
-        Args:
-            output (Runnable): The output object to retrieve the result from.
-            stream (bool): Indicates whether to use streaming or invocation mode.
-            input_value (str): The input value to pass to the output object.
-
-        Returns:
-            The result obtained from the output object.
-        """
-        if stream:
-            result = runnable.stream(input_value)
-        else:
-            message = runnable.invoke(input_value)
-            result = message.content if hasattr(message, "content") else message
-            self.status = result
-        return result
-
-    def get_chat_result(
-        self, runnable: BaseChatModel, stream: bool, input_value: str, system_message: Optional[str] = None
-    ):
-        messages = []
-        if input_value:
-            messages.append(HumanMessage(input_value))
-        if system_message:
-            messages.append(SystemMessage(system_message))
-        if stream:
-            result = runnable.stream(messages)
-        else:
-            message = runnable.invoke(messages)
-            result = message.content
-            self.status = result
-        return result
diff --git a/src/backend/langflow/components/experimental/FlowTool.py b/src/backend/langflow/components/experimental/FlowTool.py
index 5f504ff027..6dd3e4fa3f 100644
--- a/src/backend/langflow/components/experimental/FlowTool.py
+++ b/src/backend/langflow/components/experimental/FlowTool.py
@@ -1,13 +1,12 @@
 from typing import Any, List, Optional, Text
 
 from langchain_core.tools import StructuredTool
-from loguru import logger
-
-from langflow import CustomComponent
+from langflow.custom import CustomComponent
 from langflow.field_typing import Tool
 from langflow.graph.graph.base import Graph
 from langflow.helpers.flow import build_function_and_schema
 from langflow.schema.dotdict import dotdict
+from loguru import logger
 
 
 class FlowToolComponent(CustomComponent):
diff --git a/src/backend/langflow/components/tools/SearchAPITool.py b/src/backend/langflow/components/tools/SearchAPITool.py
index 76c82ad9c5..2ecee90e72 100644
--- a/src/backend/langflow/components/tools/SearchAPITool.py
+++ b/src/backend/langflow/components/tools/SearchAPITool.py
@@ -1,7 +1,6 @@
 from langchain_community.tools.searchapi import SearchAPIRun
 from langchain_community.utilities.searchapi import SearchApiAPIWrapper
-
-from langflow import CustomComponent
+from langflow.custom import CustomComponent
 from langflow.field_typing import Tool
 
 

From 827d6befec5d5934a7fb8ecd746fb4657b79ac72 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 22:33:56 -0300
Subject: [PATCH 77/83] Add new langflow helper functions and remove base model
 component

---
 .../base/langflow/alembic/helpers/flow.py     | 201 ------------------
 .../base/langflow/alembic/helpers/record.py   |  34 ---
 src/backend/base/langflow/api/utils.py        |   2 +-
 src/backend/base/langflow/api/v1/chat.py      |   2 +-
 .../base/langflow/base/agents/agent.py        |  13 +-
 .../base/langflow/base/models/model.py        |  10 +-
 .../components/embeddings/CohereEmbeddings.py |   2 +-
 .../components/embeddings/OpenAIEmbeddings.py |   4 +-
 .../components/experimental/FlowTool.py       |   7 +-
 .../components/experimental/SubFlow.py        |  13 +-
 .../components/models/base/__init__.py        |   3 -
 .../components/tools/SearchAPITool.py         |   2 +-
 .../components/vectorstores/AstraDB.py        |   9 +-
 .../components/vectorstores/AstraDBSearch.py  |   4 +-
 .../vectorstores/MongoDBAtlasVectorSearch.py  |   7 +-
 src/backend/base/langflow/graph/graph/base.py |  20 +-
 .../graph/graph/runnable_vertices_manager.py  |   2 +-
 .../{alembic => }/helpers/__init__.py         |   0
 src/backend/base/langflow/helpers/flow.py     |  18 +-
 .../custom_component/custom_component.py      |   6 +-
 .../langflow/interface/initialize/loading.py  |   6 +-
 .../base/langflow/legacy_custom/customs.py    |   2 +-
 .../base/langflow/processing/process.py       |   2 +-
 .../base/langflow/services/settings/auth.py   |   9 +-
 .../template/frontend_node/__init__.py        |   2 +
 25 files changed, 84 insertions(+), 296 deletions(-)
 delete mode 100644 src/backend/base/langflow/alembic/helpers/flow.py
 delete mode 100644 src/backend/base/langflow/alembic/helpers/record.py
 delete mode 100644 src/backend/base/langflow/components/models/base/__init__.py
 rename src/backend/base/langflow/{alembic => }/helpers/__init__.py (100%)

diff --git a/src/backend/base/langflow/alembic/helpers/flow.py b/src/backend/base/langflow/alembic/helpers/flow.py
deleted file mode 100644
index 1b91e158fe..0000000000
--- a/src/backend/base/langflow/alembic/helpers/flow.py
+++ /dev/null
@@ -1,201 +0,0 @@
-from typing import TYPE_CHECKING, Any, Callable, Coroutine, List, Optional, Tuple, Union
-
-from pydantic.v1 import BaseModel, Field, create_model
-from sqlmodel import select
-
-from langflow.schema.schema import INPUT_FIELD_NAME, Record
-from langflow.services.database.models.flow.model import Flow
-from langflow.services.deps import session_scope
-
-if TYPE_CHECKING:
-    from langflow.graph.graph.base import Graph
-    from langflow.graph.vertex.base import Vertex
-
-INPUT_TYPE_MAP = {
-    "ChatInput": {"type_hint": "Optional[str]", "default": '""'},
-    "TextInput": {"type_hint": "Optional[str]", "default": '""'},
-    "JSONInput": {"type_hint": "Optional[dict]", "default": "{}"},
-}
-
-
-def list_flows(*, user_id: Optional[str] = None) -> List[Record]:
-    if not user_id:
-        raise ValueError("Session is invalid")
-    try:
-        with session_scope() as session:
-            flows = session.exec(
-                select(Flow).where(Flow.user_id == user_id).where(Flow.is_component == False)  # noqa
-            ).all()
-
-            flows_records = [flow.to_record() for flow in flows]
-            return flows_records
-    except Exception as e:
-        raise ValueError(f"Error listing flows: {e}")
-
-
-async def load_flow(
-    user_id: str, flow_id: Optional[str] = None, flow_name: Optional[str] = None, tweaks: Optional[dict] = None
-) -> "Graph":
-    from langflow.graph.graph.base import Graph
-    from langflow.processing.process import process_tweaks
-
-    if not flow_id and not flow_name:
-        raise ValueError("Flow ID or Flow Name is required")
-    if not flow_id and flow_name:
-        flow_id = find_flow(flow_name, user_id)
-        if not flow_id:
-            raise ValueError(f"Flow {flow_name} not found")
-
-    with session_scope() as session:
-        graph_data = flow.data if (flow := session.get(Flow, flow_id)) else None
-    if not graph_data:
-        raise ValueError(f"Flow {flow_id} not found")
-    if tweaks:
-        graph_data = process_tweaks(graph_data=graph_data, tweaks=tweaks)
-    graph = Graph.from_payload(graph_data, flow_id=flow_id)
-    return graph
-
-
-def find_flow(flow_name: str, user_id: str) -> Optional[str]:
-    with session_scope() as session:
-        flow = session.exec(select(Flow).where(Flow.name == flow_name).where(Flow.user_id == user_id)).first()
-        return flow.id if flow else None
-
-
-async def run_flow(
-    inputs: Union[dict, List[dict]] = None,
-    tweaks: Optional[dict] = None,
-    flow_id: Optional[str] = None,
-    flow_name: Optional[str] = None,
-    user_id: Optional[str] = None,
-) -> Any:
-    if not user_id:
-        raise ValueError("Session is invalid")
-    graph = await load_flow(user_id, flow_id, flow_name, tweaks)
-
-    if inputs is None:
-        inputs = []
-    inputs_list = []
-    inputs_components = []
-    types = []
-    for input_dict in inputs:
-        inputs_list.append({INPUT_FIELD_NAME: input_dict.get("input_value")})
-        inputs_components.append(input_dict.get("components", []))
-        types.append(input_dict.get("type", []))
-
-    return await graph.arun(inputs_list, inputs_components=inputs_components, types=types)
-
-
-def generate_function_for_flow(inputs: List["Vertex"], flow_id: str) -> Coroutine:
-    """
-    Generate a dynamic flow function based on the given inputs and flow ID.
-
-    Args:
-        inputs (List[Vertex]): The list of input vertices for the flow.
-        flow_id (str): The ID of the flow.
-
-    Returns:
-        Coroutine: The dynamic flow function.
-
-    Raises:
-        None
-
-    Example:
-        inputs = [vertex1, vertex2]
-        flow_id = "my_flow"
-        function = generate_function_for_flow(inputs, flow_id)
-        result = function(input1, input2)
-    """
-    # Prepare function arguments with type hints and default values
-    args = [
-        f"{input_.display_name.lower().replace(' ', '_')}: {INPUT_TYPE_MAP[input_.base_name]['type_hint']} = {INPUT_TYPE_MAP[input_.base_name]['default']}"
-        for input_ in inputs
-    ]
-
-    # Maintain original argument names for constructing the tweaks dictionary
-    original_arg_names = [input_.display_name for input_ in inputs]
-
-    # Prepare a Pythonic, valid function argument string
-    func_args = ", ".join(args)
-
-    # Map original argument names to their corresponding Pythonic variable names in the function
-    arg_mappings = ", ".join(
-        f'"{original_name}": {name}'
-        for original_name, name in zip(original_arg_names, [arg.split(":")[0] for arg in args])
-    )
-
-    func_body = f"""
-from typing import Optional
-async def flow_function({func_args}):
-    tweaks = {{ {arg_mappings} }}
-    from langflow.helpers.flow import run_flow
-    from langchain_core.tools import ToolException
-    try:
-        return await run_flow(
-            tweaks={{key: {{'input_value': value}} for key, value in tweaks.items()}},
-            flow_id="{flow_id}",
-        )
-    except Exception as e:
-        raise ToolException(f'Error running flow: ' + e)
-"""
-
-    compiled_func = compile(func_body, "<string>", "exec")
-    local_scope = {}
-    exec(compiled_func, globals(), local_scope)
-    return local_scope["flow_function"]
-
-
-def build_function_and_schema(flow_record: Record, graph: "Graph") -> Tuple[Callable, BaseModel]:
-    """
-    Builds a dynamic function and schema for a given flow.
-
-    Args:
-        flow_record (Record): The flow record containing information about the flow.
-        graph (Graph): The graph representing the flow.
-
-    Returns:
-        Tuple[Callable, BaseModel]: A tuple containing the dynamic function and the schema.
-    """
-    flow_id = flow_record.id
-    inputs = get_flow_inputs(graph)
-    dynamic_flow_function = generate_function_for_flow(inputs, flow_id)
-    schema = build_schema_from_inputs(flow_record.name, inputs)
-    return dynamic_flow_function, schema
-
-
-def get_flow_inputs(graph: "Graph") -> List["Vertex"]:
-    """
-    Retrieves the flow inputs from the given graph.
-
-    Args:
-        graph (Graph): The graph object representing the flow.
-
-    Returns:
-        List[Record]: A list of input records, where each record contains the ID, name, and description of the input vertex.
-    """
-    inputs = []
-    for vertex in graph.vertices:
-        if vertex.is_input:
-            inputs.append(vertex)
-    return inputs
-
-
-def build_schema_from_inputs(name: str, inputs: List["Vertex"]) -> BaseModel:
-    """
-    Builds a schema from the given inputs.
-
-    Args:
-        name (str): The name of the schema.
-        inputs (List[tuple[str, str, str]]): A list of tuples representing the inputs.
-            Each tuple contains three elements: the input name, the input type, and the input description.
-
-    Returns:
-        BaseModel: The schema model.
-
-    """
-    fields = {}
-    for input_ in inputs:
-        field_name = input_.display_name.lower().replace(" ", "_")
-        description = input_.description
-        fields[field_name] = (str, Field(default="", description=description))
-    return create_model(name, **fields)
diff --git a/src/backend/base/langflow/alembic/helpers/record.py b/src/backend/base/langflow/alembic/helpers/record.py
deleted file mode 100644
index d7b1d2b060..0000000000
--- a/src/backend/base/langflow/alembic/helpers/record.py
+++ /dev/null
@@ -1,34 +0,0 @@
-from langchain_core.documents import Document
-
-from langflow.schema import Record
-
-
-def docs_to_records(documents: list[Document]) -> list[Record]:
-    """
-    Converts a list of Documents to a list of Records.
-
-    Args:
-        documents (list[Document]): The list of Documents to convert.
-
-    Returns:
-        list[Record]: The converted list of Records.
-    """
-    return [Record.from_document(document) for document in documents]
-
-
-def records_to_text(template: str, records: list[Record]) -> str:
-    """
-    Converts a list of Records to a list of texts.
-
-    Args:
-        records (list[Record]): The list of Records to convert.
-
-    Returns:
-        list[str]: The converted list of texts.
-    """
-    if isinstance(records, Record):
-        records = [records]
-    # Check if there are any format strings in the template
-
-    formated_records = [template.format(data=record.data, **record.data) for record in records]
-    return "\n".join(formated_records)
diff --git a/src/backend/base/langflow/api/utils.py b/src/backend/base/langflow/api/utils.py
index c03a724a70..ef315eb7ff 100644
--- a/src/backend/base/langflow/api/utils.py
+++ b/src/backend/base/langflow/api/utils.py
@@ -164,7 +164,7 @@ def get_is_component_from_data(data: dict):
 
 
 async def check_langflow_version(component: StoreComponentCreate):
-    from langflow import __version__ as current_version
+    from langflow.version import __version__ as current_version
 
     if not component.last_tested_version:
         component.last_tested_version = current_version
diff --git a/src/backend/base/langflow/api/v1/chat.py b/src/backend/base/langflow/api/v1/chat.py
index 613a2fc51c..214d6d1580 100644
--- a/src/backend/base/langflow/api/v1/chat.py
+++ b/src/backend/base/langflow/api/v1/chat.py
@@ -1,7 +1,7 @@
 import time
 import uuid
 from functools import partial
-from typing import TYPE_CHECKING, Annotated, Optional
+from typing import TYPE_CHECKING, Annotated, Callable, Optional
 
 from fastapi import APIRouter, BackgroundTasks, Body, Depends, HTTPException
 from fastapi.responses import StreamingResponse
diff --git a/src/backend/base/langflow/base/agents/agent.py b/src/backend/base/langflow/base/agents/agent.py
index 431ddfa4f2..d995280f4b 100644
--- a/src/backend/base/langflow/base/agents/agent.py
+++ b/src/backend/base/langflow/base/agents/agent.py
@@ -1,6 +1,6 @@
 from typing import List, Optional, Union
 
-from langchain.agents.agent import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent, RunnableMultiActionAgent
+from langchain.agents.agent import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
 from langchain_core.runnables import Runnable
 
 from langflow.field_typing import BaseMemory, Text, Tool
@@ -50,11 +50,13 @@ async def run_agent(
     ) -> Text:
         if isinstance(agent, AgentExecutor):
             runnable = agent
-        elif isinstance(agent, Runnable):
-            runnable = RunnableMultiActionAgent(runnable=agent, stream_runnable=False)
         else:
             runnable = AgentExecutor.from_agent_and_tools(
-                agent=agent, tools=tools, verbose=True, memory=memory, handle_parsing_errors=handle_parsing_errors
+                agent=agent,  # type: ignore
+                tools=tools,
+                verbose=True,
+                memory=memory,
+                handle_parsing_errors=handle_parsing_errors,
             )
         input_dict = {"input": inputs}
         for var in input_variables:
@@ -70,4 +72,5 @@ async def run_agent(
             else:
                 raise ValueError("Output key not found in result. Tried 'output'.")
 
-        return result.get("output")
+        output: str = result.get("output")
+        return output
diff --git a/src/backend/base/langflow/base/models/model.py b/src/backend/base/langflow/base/models/model.py
index a6ed0ccaf1..8beeef59a4 100644
--- a/src/backend/base/langflow/base/models/model.py
+++ b/src/backend/base/langflow/base/models/model.py
@@ -1,4 +1,4 @@
-from typing import Optional
+from typing import Optional, Union
 
 from langchain_core.language_models.chat_models import BaseChatModel
 from langchain_core.language_models.llms import LLM
@@ -34,11 +34,11 @@ def get_result(self, runnable: LLM, stream: bool, input_value: str):
     def get_chat_result(
         self, runnable: BaseChatModel, stream: bool, input_value: str, system_message: Optional[str] = None
     ):
-        messages = []
-        if input_value:
-            messages.append(HumanMessage(input_value))
+        messages: list[Union[HumanMessage, SystemMessage]] = []
         if system_message:
-            messages.append(SystemMessage(system_message))
+            messages.append(SystemMessage(content=system_message))
+        if input_value:
+            messages.append(HumanMessage(content=input_value))
         if stream:
             result = runnable.stream(messages)
         else:
diff --git a/src/backend/base/langflow/components/embeddings/CohereEmbeddings.py b/src/backend/base/langflow/components/embeddings/CohereEmbeddings.py
index 07b21dabe2..e7c7739075 100644
--- a/src/backend/base/langflow/components/embeddings/CohereEmbeddings.py
+++ b/src/backend/base/langflow/components/embeddings/CohereEmbeddings.py
@@ -22,7 +22,7 @@ def build(
         self,
         request_timeout: Optional[float] = None,
         cohere_api_key: str = "",
-        max_retries: Optional[int] = None,
+        max_retries: int = 3,
         model: str = "embed-english-v2.0",
         truncate: Optional[str] = None,
         user_agent: str = "langchain",
diff --git a/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py b/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
index 3578caef79..c902e7fafb 100644
--- a/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
+++ b/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
@@ -100,8 +100,6 @@ def build(
         if disallowed_special == ["all"]:
             disallowed_special = "all"  # type: ignore
 
-        api_key = SecretStr(openai_api_key) if openai_api_key else None
-
         return OpenAIEmbeddings(
             tiktoken_enabled=tiktoken_enable,
             default_headers=default_headers,
@@ -116,7 +114,7 @@ def build(
             model=model,
             model_kwargs=model_kwargs,
             base_url=openai_api_base,
-            api_key=api_key,
+            api_key=openai_api_key,
             openai_api_type=openai_api_type,
             api_version=openai_api_version,
             organization=openai_organization,
diff --git a/src/backend/base/langflow/components/experimental/FlowTool.py b/src/backend/base/langflow/components/experimental/FlowTool.py
index 541341d85a..ac48a0f038 100644
--- a/src/backend/base/langflow/components/experimental/FlowTool.py
+++ b/src/backend/base/langflow/components/experimental/FlowTool.py
@@ -1,4 +1,4 @@
-from typing import Any, List, Optional, Text
+from typing import Any, List, Optional
 
 from langchain_core.tools import StructuredTool
 from loguru import logger
@@ -8,6 +8,7 @@
 from langflow.graph.graph.base import Graph
 from langflow.helpers.flow import build_function_and_schema
 from langflow.schema.dotdict import dotdict
+from langflow.schema.schema import Record
 
 
 class FlowToolComponent(CustomComponent):
@@ -19,7 +20,7 @@ def get_flow_names(self) -> List[str]:
         flow_records = self.list_flows()
         return [flow_record.data["name"] for flow_record in flow_records]
 
-    def get_flow(self, flow_name: str) -> Optional[Text]:
+    def get_flow(self, flow_name: str) -> Optional[Record]:
         """
         Retrieves a flow by its name.
 
@@ -82,4 +83,4 @@ async def build(self, flow_name: str, name: str, description: str, return_direct
         description_repr = repr(tool.description).strip("'")
         args_str = "\n".join([f"- {arg_name}: {arg_data['description']}" for arg_name, arg_data in tool.args.items()])
         self.status = f"{description_repr}\nArguments:\n{args_str}"
-        return tool
+        return tool  # type: ignore
diff --git a/src/backend/base/langflow/components/experimental/SubFlow.py b/src/backend/base/langflow/components/experimental/SubFlow.py
index 150461275b..7a45bb6e98 100644
--- a/src/backend/base/langflow/components/experimental/SubFlow.py
+++ b/src/backend/base/langflow/components/experimental/SubFlow.py
@@ -1,4 +1,4 @@
-from typing import Any, List, Optional, Text, Tuple
+from typing import Any, List, Optional, Tuple
 
 from loguru import logger
 
@@ -20,7 +20,7 @@ def get_flow_names(self) -> List[str]:
         flow_records = self.list_flows()
         return [flow_record.data["name"] for flow_record in flow_records]
 
-    def get_flow(self, flow_name: str) -> Optional[Text]:
+    def get_flow(self, flow_name: str) -> Optional[Record]:
         flow_records = self.list_flows()
         for flow_record in flow_records:
             if flow_record.data["name"] == flow_name:
@@ -110,12 +110,15 @@ async def build(self, flow_name: str, **kwargs) -> List[Record]:
             tweaks=tweaks,
             flow_name=flow_name,
         )
+        if not run_outputs:
+            return []
         run_output = run_outputs[0]
 
         records = []
-        for output in run_output.outputs:
-            if output:
-                records.extend(self.build_records_from_result_data(output))
+        if run_outputs is not None:
+            for output in run_output.outputs:
+                if output:
+                    records.extend(self.build_records_from_result_data(output))
 
         self.status = records
         logger.debug(records)
diff --git a/src/backend/base/langflow/components/models/base/__init__.py b/src/backend/base/langflow/components/models/base/__init__.py
deleted file mode 100644
index 921f10336a..0000000000
--- a/src/backend/base/langflow/components/models/base/__init__.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from .model import LCModelComponent
-
-__all__ = ["LCModelComponent"]
diff --git a/src/backend/base/langflow/components/tools/SearchAPITool.py b/src/backend/base/langflow/components/tools/SearchAPITool.py
index 6ec2f693ca..e0658c8c8d 100644
--- a/src/backend/base/langflow/components/tools/SearchAPITool.py
+++ b/src/backend/base/langflow/components/tools/SearchAPITool.py
@@ -34,4 +34,4 @@ def build(
         tool = SearchAPIRun(api_wrapper=search_api_wrapper)
 
         self.status = tool
-        return tool
+        return tool  # type: ignore
diff --git a/src/backend/base/langflow/components/vectorstores/AstraDB.py b/src/backend/base/langflow/components/vectorstores/AstraDB.py
index 9ab73808e3..28f5ec22e9 100644
--- a/src/backend/base/langflow/components/vectorstores/AstraDB.py
+++ b/src/backend/base/langflow/components/vectorstores/AstraDB.py
@@ -1,6 +1,7 @@
 from typing import List, Optional
 
 from langchain_astradb import AstraDBVectorStore
+from langchain_astradb.utils.astradb import SetupMode
 
 from langflow.custom import CustomComponent
 from langflow.field_typing import Embeddings, VectorStore
@@ -83,6 +84,10 @@ def build(
         metadata_indexing_exclude: Optional[List[str]] = None,
         collection_indexing_policy: Optional[dict] = None,
     ) -> VectorStore:
+        try:
+            setup_mode_value = SetupMode[setup_mode.upper()]
+        except KeyError:
+            raise ValueError(f"Invalid setup mode: {setup_mode}")
         if inputs:
             documents = [_input.to_lc_document() for _input in inputs]
 
@@ -98,7 +103,7 @@ def build(
                 bulk_insert_batch_concurrency=bulk_insert_batch_concurrency,
                 bulk_insert_overwrite_concurrency=bulk_insert_overwrite_concurrency,
                 bulk_delete_concurrency=bulk_delete_concurrency,
-                setup_mode=setup_mode,
+                setup_mode=setup_mode_value,
                 pre_delete_collection=pre_delete_collection,
                 metadata_indexing_include=metadata_indexing_include,
                 metadata_indexing_exclude=metadata_indexing_exclude,
@@ -116,7 +121,7 @@ def build(
                 bulk_insert_batch_concurrency=bulk_insert_batch_concurrency,
                 bulk_insert_overwrite_concurrency=bulk_insert_overwrite_concurrency,
                 bulk_delete_concurrency=bulk_delete_concurrency,
-                setup_mode=setup_mode,
+                setup_mode=setup_mode_value,
                 pre_delete_collection=pre_delete_collection,
                 metadata_indexing_include=metadata_indexing_include,
                 metadata_indexing_exclude=metadata_indexing_exclude,
diff --git a/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py b/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
index e358eeae49..3343d91f64 100644
--- a/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
+++ b/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
@@ -6,7 +6,7 @@
 from langflow.schema import Record
 
 
-class AstraDBSearchComponent(AstraDBVectorStoreComponent, LCVectorStoreComponent):
+class AstraDBSearchComponent(LCVectorStoreComponent):
     display_name = "AstraDB Search"
     description = "Searches an existing AstraDB Vector Store"
 
@@ -90,7 +90,7 @@ def build(
         metadata_indexing_exclude: Optional[List[str]] = None,
         collection_indexing_policy: Optional[dict] = None,
     ) -> List[Record]:
-        vector_store = super().build(
+        vector_store = AstraDBVectorStoreComponent().build(
             embedding=embedding,
             collection_name=collection_name,
             token=token,
diff --git a/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py b/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
index 9ccd80a275..cbb583fb36 100644
--- a/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
+++ b/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
@@ -6,7 +6,7 @@
 from langflow.schema import Record
 
 
-class MongoDBAtlasSearchComponent(MongoDBAtlasComponent, LCVectorStoreComponent):
+class MongoDBAtlasSearchComponent(LCVectorStoreComponent):
     display_name = "MongoDB Atlas Search"
     description = "Search a MongoDB Atlas Vector Store for similar documents."
 
@@ -37,9 +37,10 @@ def build(  # type: ignore[override]
         search_kwargs: Optional[NestedDict] = None,
     ) -> List[Record]:
         search_kwargs = search_kwargs or {}
-        vector_store = super().build(
+        vector_store = MongoDBAtlasComponent().build(
             mongodb_atlas_cluster_uri=mongodb_atlas_cluster_uri,
-            namespace=f"{db_name}.{collection_name}",
+            collection_name=collection_name,
+            db_name=db_name,
             embedding=embedding,
             index_name=index_name,
         )
diff --git a/src/backend/base/langflow/graph/graph/base.py b/src/backend/base/langflow/graph/graph/base.py
index 174ec9ce45..0c00c2a2c7 100644
--- a/src/backend/base/langflow/graph/graph/base.py
+++ b/src/backend/base/langflow/graph/graph/base.py
@@ -1,7 +1,7 @@
 import asyncio
 from collections import defaultdict, deque
 from itertools import chain
-from typing import TYPE_CHECKING, Coroutine, Dict, Generator, List, Optional, Type, Union
+from typing import TYPE_CHECKING, Callable, Coroutine, Dict, Generator, List, Literal, Optional, Type, Union
 
 from loguru import logger
 
@@ -269,9 +269,9 @@ async def _run(
 
     def run(
         self,
-        inputs: Dict[str, str],
-        input_components: Optional[list[str]] = None,
-        types: Optional[list[str]] = None,
+        inputs: list[Dict[str, str]],
+        input_components: Optional[list[list[str]]] = None,
+        types: Optional[list[Literal["chat", "text", "json", "any"] | None]] = None,
         outputs: Optional[list[str]] = None,
         session_id: Optional[str] = None,
         stream: bool = False,
@@ -309,7 +309,7 @@ async def arun(
         self,
         inputs: list[Dict[str, str]],
         inputs_components: Optional[list[list[str]]] = None,
-        types: Optional[list[str]] = None,
+        types: Optional[list[Literal["chat", "text", "json", "any"] | None]] = None,
         outputs: Optional[list[str]] = None,
         session_id: Optional[str] = None,
         stream: bool = False,
@@ -338,8 +338,12 @@ async def arun(
             inputs = [{}]
         # Length of all should be the as inputs length
         # just add empty lists to complete the length
+        if inputs_components is None:
+            inputs_components = []
         for _ in range(len(inputs) - len(inputs_components)):
             inputs_components.append([])
+        if types is None:
+            types = []
         for _ in range(len(inputs) - len(types)):
             types.append("any")
         for run_inputs, components, input_type in zip(inputs, inputs_components, types):
@@ -650,7 +654,7 @@ def get_vertex(self, vertex_id: str) -> Vertex:
     async def build_vertex(
         self,
         lock: asyncio.Lock,
-        set_cache_coro: Coroutine,
+        set_cache_coro: Callable[["Graph", asyncio.Lock], Coroutine],
         vertex_id: str,
         inputs_dict: Optional[Dict[str, str]] = None,
         user_id: Optional[str] = None,
@@ -693,7 +697,9 @@ async def build_vertex(
             logger.exception(f"Error building vertex: {exc}")
             raise exc
 
-    async def get_next_and_top_level_vertices(self, lock: asyncio.Lock, set_cache_coro: Coroutine, vertex: Vertex):
+    async def get_next_and_top_level_vertices(
+        self, lock: asyncio.Lock, set_cache_coro: Callable[["Graph", asyncio.Lock], Coroutine], vertex: Vertex
+    ):
         """
         Retrieves the next runnable vertices and the top level vertices for a given vertex.
 
diff --git a/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py b/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
index 79593cee3f..d31f01fe75 100644
--- a/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
+++ b/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
@@ -85,7 +85,7 @@ async def get_next_runnable_vertices(
             for v_id in set(next_runnable_vertices):  # Use set to avoid duplicates
                 self.update_vertex_run_state(v_id, is_runnable=False)
                 self.remove_from_predecessors(v_id)
-            await set_cache_coro(data=graph, lock=lock)
+            await set_cache_coro(graph, lock)
         return next_runnable_vertices
 
     @staticmethod
diff --git a/src/backend/base/langflow/alembic/helpers/__init__.py b/src/backend/base/langflow/helpers/__init__.py
similarity index 100%
rename from src/backend/base/langflow/alembic/helpers/__init__.py
rename to src/backend/base/langflow/helpers/__init__.py
diff --git a/src/backend/base/langflow/helpers/flow.py b/src/backend/base/langflow/helpers/flow.py
index 9d36ff1d1c..88c51efa30 100644
--- a/src/backend/base/langflow/helpers/flow.py
+++ b/src/backend/base/langflow/helpers/flow.py
@@ -1,4 +1,4 @@
-from typing import TYPE_CHECKING, Any, Coroutine, List, Optional, Tuple, Union
+from typing import TYPE_CHECKING, Any, Awaitable, Callable, List, Optional, Tuple, Type, Union, cast
 
 from pydantic.v1 import BaseModel, Field, create_model
 from sqlmodel import select
@@ -63,7 +63,7 @@ def find_flow(flow_name: str, user_id: str) -> Optional[str]:
 
 
 async def run_flow(
-    inputs: Union[dict, List[dict]] = None,
+    inputs: Optional[Union[dict, List[dict]]] = None,
     tweaks: Optional[dict] = None,
     flow_id: Optional[str] = None,
     flow_name: Optional[str] = None,
@@ -75,18 +75,18 @@ async def run_flow(
 
     if inputs is None:
         inputs = []
-    inputs_list = []
+    inputs_list: list[dict[str, str]] = []
     inputs_components = []
     types = []
     for input_dict in inputs:
-        inputs_list.append({INPUT_FIELD_NAME: input_dict.get("input_value", "")})
+        inputs_list.append({INPUT_FIELD_NAME: cast(str, input_dict.get("input_value", ""))})
         inputs_components.append(input_dict.get("components", []))
         types.append(input_dict.get("type", []))
 
     return await graph.arun(inputs_list, inputs_components=inputs_components, types=types)
 
 
-def generate_function_for_flow(inputs: List["Vertex"], flow_id: str) -> Coroutine:
+def generate_function_for_flow(inputs: List["Vertex"], flow_id: str) -> Callable[..., Awaitable[Any]]:
     """
     Generate a dynamic flow function based on the given inputs and flow ID.
 
@@ -145,7 +145,9 @@ async def flow_function({func_args}):
     return local_scope["flow_function"]
 
 
-def build_function_and_schema(flow_record: Record, graph: "Graph") -> Tuple[Coroutine, BaseModel]:
+def build_function_and_schema(
+    flow_record: Record, graph: "Graph"
+) -> Tuple[Callable[..., Awaitable[Any]], Type[BaseModel]]:
     """
     Builds a dynamic function and schema for a given flow.
 
@@ -180,7 +182,7 @@ def get_flow_inputs(graph: "Graph") -> List["Vertex"]:
     return inputs
 
 
-def build_schema_from_inputs(name: str, inputs: List["Vertex"]) -> BaseModel:
+def build_schema_from_inputs(name: str, inputs: List["Vertex"]) -> Type[BaseModel]:
     """
     Builds a schema from the given inputs.
 
@@ -198,4 +200,4 @@ def build_schema_from_inputs(name: str, inputs: List["Vertex"]) -> BaseModel:
         field_name = input_.display_name.lower().replace(" ", "_")
         description = input_.description
         fields[field_name] = (str, Field(default="", description=description))
-    return create_model(name, **fields)
+    return create_model(name, **fields)  # type: ignore
diff --git a/src/backend/base/langflow/interface/custom/custom_component/custom_component.py b/src/backend/base/langflow/interface/custom/custom_component/custom_component.py
index 1554a57daf..4276d4616e 100644
--- a/src/backend/base/langflow/interface/custom/custom_component/custom_component.py
+++ b/src/backend/base/langflow/interface/custom/custom_component/custom_component.py
@@ -423,11 +423,13 @@ def get_function(self):
         return validate.create_function(self.code, self.function_entrypoint_name)
 
     async def load_flow(self, flow_id: str, tweaks: Optional[dict] = None) -> "Graph":
-        return await load_flow(flow_id, tweaks)
+        if not self._user_id:
+            raise ValueError("Session is invalid")
+        return await load_flow(user_id=self._user_id, flow_id=flow_id, tweaks=tweaks)
 
     async def run_flow(
         self,
-        inputs: Union[dict, List[dict]] = None,
+        inputs: Optional[Union[dict, List[dict]]] = None,
         flow_id: Optional[str] = None,
         flow_name: Optional[str] = None,
         tweaks: Optional[dict] = None,
diff --git a/src/backend/base/langflow/interface/initialize/loading.py b/src/backend/base/langflow/interface/initialize/loading.py
index 0ba40b90e3..55940622c2 100644
--- a/src/backend/base/langflow/interface/initialize/loading.py
+++ b/src/backend/base/langflow/interface/initialize/loading.py
@@ -38,7 +38,7 @@ async def instantiate_class(
     user_id=None,
 ) -> Any:
     """Instantiate class from module type and key, and params"""
-    from langflow.legacy_custom.customs import CUSTOM_NODES
+    from langflow.interface.custom_lists import CUSTOM_NODES
 
     vertex_type = vertex.vertex_type
     base_type = vertex.base_type
@@ -50,7 +50,9 @@ async def instantiate_class(
         if custom_node := CUSTOM_NODES.get(vertex_type):
             if hasattr(custom_node, "initialize"):
                 return custom_node.initialize(**params)
-            return custom_node(**params)
+            if callable(custom_node):
+                return custom_node(**params)
+            raise ValueError(f"Custom node {vertex_type} is not callable")
     logger.debug(f"Instantiating {vertex_type} of type {base_type}")
     if not base_type:
         raise ValueError("No base type provided for vertex")
diff --git a/src/backend/base/langflow/legacy_custom/customs.py b/src/backend/base/langflow/legacy_custom/customs.py
index 82e87f1e55..ff69064ffd 100644
--- a/src/backend/base/langflow/legacy_custom/customs.py
+++ b/src/backend/base/langflow/legacy_custom/customs.py
@@ -1,7 +1,7 @@
 from langflow.template import frontend_node
 
 # These should always be instantiated
-CUSTOM_NODES = {
+CUSTOM_NODES: dict[str, dict[str, frontend_node.base.FrontendNode]] = {
     # "prompts": {
     #     "ZeroShotPrompt": frontend_node.prompts.ZeroShotPromptNode(),
     # },
diff --git a/src/backend/base/langflow/processing/process.py b/src/backend/base/langflow/processing/process.py
index fa499472fa..c7e496dd77 100644
--- a/src/backend/base/langflow/processing/process.py
+++ b/src/backend/base/langflow/processing/process.py
@@ -125,7 +125,7 @@ class Result(BaseModel):
 
 
 async def run_graph(
-    graph: Union["Graph", dict],
+    graph: "Graph",
     flow_id: str,
     stream: bool,
     session_id: Optional[str] = None,
diff --git a/src/backend/base/langflow/services/settings/auth.py b/src/backend/base/langflow/services/settings/auth.py
index 37201bba07..a5bd7ed804 100644
--- a/src/backend/base/langflow/services/settings/auth.py
+++ b/src/backend/base/langflow/services/settings/auth.py
@@ -15,7 +15,7 @@ class AuthSettings(BaseSettings):
     # Login settings
     CONFIG_DIR: str
     SECRET_KEY: SecretStr = Field(
-        default="",
+        default=SecretStr(""),
         description="Secret key for JWT. If not provided, a random one will be generated.",
         frozen=False,
     )
@@ -86,9 +86,10 @@ def get_secret_key(cls, value, values):
 
         secret_key_path = Path(config_dir) / "secret_key"
 
-        if value:
+        if value and isinstance(value, SecretStr):
             logger.debug("Secret key provided")
-            write_secret_to_file(secret_key_path, value)
+            secret_value = value.get_secret_value()
+            write_secret_to_file(secret_key_path, secret_value)
         else:
             logger.debug("No secret key provided, generating a random one")
 
@@ -104,4 +105,4 @@ def get_secret_key(cls, value, values):
                 write_secret_to_file(secret_key_path, value)
                 logger.debug("Saved secret key")
 
-        return value
+        return value if isinstance(value, SecretStr) else SecretStr(value)
diff --git a/src/backend/base/langflow/template/frontend_node/__init__.py b/src/backend/base/langflow/template/frontend_node/__init__.py
index 00c2766962..ceb2e0cb9b 100644
--- a/src/backend/base/langflow/template/frontend_node/__init__.py
+++ b/src/backend/base/langflow/template/frontend_node/__init__.py
@@ -10,10 +10,12 @@
     textsplitters,
     tools,
     vectorstores,
+    base,
 )
 
 __all__ = [
     "agents",
+    "base",
     "chains",
     "embeddings",
     "memories",

From 73a23ca0966fb4878ff56f9abf5539771f9ca188 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 22:50:46 -0300
Subject: [PATCH 78/83] Add new files and modify existing files

---
 src/backend/base/langflow/api/v1/chat.py      |  2 +-
 .../base/langflow/base/agents/agent.py        | 18 ++--
 .../components/embeddings/OpenAIEmbeddings.py |  1 -
 .../components/experimental/FlowTool.py       |  7 +-
 .../components/experimental/SubFlow.py        | 15 ++--
 .../base/langflow/interface/tools/base.py     |  2 -
 src/backend/langflow/base/agents/agent.py     | 70 ----------------
 .../components/experimental/FlowTool.py       | 84 -------------------
 .../components/experimental/Schema.py         | 25 ------
 .../components/tools/SearchAPITool.py         | 36 --------
 .../{base/agents/__init__.py => py.typed}     |  0
 src/backend/{base => }/langflow/version.py    |  0
 12 files changed, 19 insertions(+), 241 deletions(-)
 delete mode 100644 src/backend/langflow/base/agents/agent.py
 delete mode 100644 src/backend/langflow/components/experimental/FlowTool.py
 delete mode 100644 src/backend/langflow/components/experimental/Schema.py
 delete mode 100644 src/backend/langflow/components/tools/SearchAPITool.py
 rename src/backend/langflow/{base/agents/__init__.py => py.typed} (100%)
 rename src/backend/{base => }/langflow/version.py (100%)

diff --git a/src/backend/base/langflow/api/v1/chat.py b/src/backend/base/langflow/api/v1/chat.py
index 214d6d1580..613a2fc51c 100644
--- a/src/backend/base/langflow/api/v1/chat.py
+++ b/src/backend/base/langflow/api/v1/chat.py
@@ -1,7 +1,7 @@
 import time
 import uuid
 from functools import partial
-from typing import TYPE_CHECKING, Annotated, Callable, Optional
+from typing import TYPE_CHECKING, Annotated, Optional
 
 from fastapi import APIRouter, BackgroundTasks, Body, Depends, HTTPException
 from fastapi.responses import StreamingResponse
diff --git a/src/backend/base/langflow/base/agents/agent.py b/src/backend/base/langflow/base/agents/agent.py
index d995280f4b..28767a59a5 100644
--- a/src/backend/base/langflow/base/agents/agent.py
+++ b/src/backend/base/langflow/base/agents/agent.py
@@ -1,10 +1,11 @@
-from typing import List, Optional, Union
+from typing import List, Union
+
+from langchain.agents import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
 
-from langchain.agents.agent import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
 from langchain_core.runnables import Runnable
 
+from langflow.custom import CustomComponent
 from langflow.field_typing import BaseMemory, Text, Tool
-from langflow.interface.custom.custom_component import CustomComponent
 
 
 class LCAgentComponent(CustomComponent):
@@ -44,7 +45,7 @@ async def run_agent(
         inputs: str,
         input_variables: list[str],
         tools: List[Tool],
-        memory: Optional[BaseMemory] = None,
+        memory: BaseMemory = None,
         handle_parsing_errors: bool = True,
         output_key: str = "output",
     ) -> Text:
@@ -52,11 +53,7 @@ async def run_agent(
             runnable = agent
         else:
             runnable = AgentExecutor.from_agent_and_tools(
-                agent=agent,  # type: ignore
-                tools=tools,
-                verbose=True,
-                memory=memory,
-                handle_parsing_errors=handle_parsing_errors,
+                agent=agent, tools=tools, verbose=True, memory=memory, handle_parsing_errors=handle_parsing_errors
             )
         input_dict = {"input": inputs}
         for var in input_variables:
@@ -72,5 +69,4 @@ async def run_agent(
             else:
                 raise ValueError("Output key not found in result. Tried 'output'.")
 
-        output: str = result.get("output")
-        return output
+        return result.get("output")
diff --git a/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py b/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
index c902e7fafb..a7fc838b33 100644
--- a/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
+++ b/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
@@ -1,7 +1,6 @@
 from typing import Any, Callable, Dict, List, Optional, Union
 
 from langchain_openai.embeddings.base import OpenAIEmbeddings
-from pydantic.v1.types import SecretStr
 
 from langflow.field_typing import NestedDict
 from langflow.interface.custom.custom_component import CustomComponent
diff --git a/src/backend/base/langflow/components/experimental/FlowTool.py b/src/backend/base/langflow/components/experimental/FlowTool.py
index ac48a0f038..541341d85a 100644
--- a/src/backend/base/langflow/components/experimental/FlowTool.py
+++ b/src/backend/base/langflow/components/experimental/FlowTool.py
@@ -1,4 +1,4 @@
-from typing import Any, List, Optional
+from typing import Any, List, Optional, Text
 
 from langchain_core.tools import StructuredTool
 from loguru import logger
@@ -8,7 +8,6 @@
 from langflow.graph.graph.base import Graph
 from langflow.helpers.flow import build_function_and_schema
 from langflow.schema.dotdict import dotdict
-from langflow.schema.schema import Record
 
 
 class FlowToolComponent(CustomComponent):
@@ -20,7 +19,7 @@ def get_flow_names(self) -> List[str]:
         flow_records = self.list_flows()
         return [flow_record.data["name"] for flow_record in flow_records]
 
-    def get_flow(self, flow_name: str) -> Optional[Record]:
+    def get_flow(self, flow_name: str) -> Optional[Text]:
         """
         Retrieves a flow by its name.
 
@@ -83,4 +82,4 @@ async def build(self, flow_name: str, name: str, description: str, return_direct
         description_repr = repr(tool.description).strip("'")
         args_str = "\n".join([f"- {arg_name}: {arg_data['description']}" for arg_name, arg_data in tool.args.items()])
         self.status = f"{description_repr}\nArguments:\n{args_str}"
-        return tool  # type: ignore
+        return tool
diff --git a/src/backend/base/langflow/components/experimental/SubFlow.py b/src/backend/base/langflow/components/experimental/SubFlow.py
index 7a45bb6e98..9f9abded3d 100644
--- a/src/backend/base/langflow/components/experimental/SubFlow.py
+++ b/src/backend/base/langflow/components/experimental/SubFlow.py
@@ -1,10 +1,11 @@
-from typing import Any, List, Optional, Tuple
+from typing import Any, List, Optional
 
 from loguru import logger
 
 from langflow.custom import CustomComponent
 from langflow.graph.graph.base import Graph
 from langflow.graph.schema import ResultData, RunOutputs
+from langflow.graph.vertex.base import Vertex
 from langflow.schema import Record
 from langflow.schema.dotdict import dotdict
 from langflow.template.field.base import TemplateField
@@ -50,7 +51,7 @@ def update_build_config(self, build_config: dotdict, field_value: Any, field_nam
 
         return build_config
 
-    def get_flow_inputs(self, graph: Graph) -> List[Record]:
+    def get_flow_inputs(self, graph: Graph) -> List[Vertex]:
         inputs = []
         for vertex in graph.vertices:
             if vertex.is_input:
@@ -58,13 +59,13 @@ def get_flow_inputs(self, graph: Graph) -> List[Record]:
         logger.debug(inputs)
         return inputs
 
-    def add_inputs_to_build_config(self, inputs: List[Tuple], build_config: dotdict):
+    def add_inputs_to_build_config(self, inputs: List[Vertex], build_config: dotdict):
         new_fields: list[TemplateField] = []
-        for input_id, input_display_name, input_description in inputs:
+        for vertex in inputs:
             field = TemplateField(
-                display_name=input_display_name,
-                name=input_id,
-                info=input_description,
+                display_name=vertex.display_name,
+                name=vertex.id,
+                info=vertex.description,
                 field_type="str",
                 default=None,
             )
diff --git a/src/backend/base/langflow/interface/tools/base.py b/src/backend/base/langflow/interface/tools/base.py
index 2506c01706..ddaccb4bbd 100644
--- a/src/backend/base/langflow/interface/tools/base.py
+++ b/src/backend/base/langflow/interface/tools/base.py
@@ -5,8 +5,6 @@
 from langflow.interface.tools.constants import ALL_TOOLS_NAMES, CUSTOM_TOOLS, FILE_TOOLS, OTHER_TOOLS
 from langflow.interface.tools.util import get_tool_params
 from langflow.legacy_custom import customs
-from langflow.interface.tools.util import get_tool_params
-from langflow.legacy_custom import customs
 from langflow.services.deps import get_settings_service
 from langflow.template.field.base import TemplateField
 from langflow.template.template.base import Template
diff --git a/src/backend/langflow/base/agents/agent.py b/src/backend/langflow/base/agents/agent.py
deleted file mode 100644
index b0c61f6e13..0000000000
--- a/src/backend/langflow/base/agents/agent.py
+++ /dev/null
@@ -1,70 +0,0 @@
-from typing import List, Union
-
-from langchain.agents import (AgentExecutor, BaseMultiActionAgent,
-
-from langflow.custom import CustomComponent
-from langflow.field_typing import BaseMemory, Text, Tool
-
-
-class LCAgentComponent(CustomComponent):
-    def build_config(self):
-        return {
-            "lc": {
-                "display_name": "LangChain",
-                "info": "The LangChain to interact with.",
-            },
-            "handle_parsing_errors": {
-                "display_name": "Handle Parsing Errors",
-                "info": "If True, the agent will handle parsing errors. If False, the agent will raise an error.",
-                "advanced": True,
-            },
-            "output_key": {
-                "display_name": "Output Key",
-                "info": "The key to use to get the output from the agent.",
-                "advanced": True,
-            },
-            "memory": {
-                "display_name": "Memory",
-                "info": "Memory to use for the agent.",
-            },
-            "tools": {
-                "display_name": "Tools",
-                "info": "Tools the agent can use.",
-            },
-            "input_value": {
-                "display_name": "Input",
-                "info": "Input text to pass to the agent.",
-            },
-        }
-
-    async def run_agent(
-        self,
-        agent: Union[BaseSingleActionAgent, BaseMultiActionAgent, AgentExecutor],
-        inputs: str,
-        input_variables: list[str],
-        tools: List[Tool],
-        memory: BaseMemory = None,
-        handle_parsing_errors: bool = True,
-        output_key: str = "output",
-    ) -> Text:
-        if isinstance(agent, AgentExecutor):
-            runnable = agent
-        else:
-            runnable = AgentExecutor.from_agent_and_tools(
-                agent=agent, tools=tools, verbose=True, memory=memory, handle_parsing_errors=handle_parsing_errors
-            )
-        input_dict = {"input": inputs}
-        for var in input_variables:
-            if var not in ["agent_scratchpad", "input"]:
-                input_dict[var] = ""
-        result = await runnable.ainvoke(input_dict)
-        self.status = result
-        if output_key in result:
-            return result.get(output_key)
-        elif "output" not in result:
-            if output_key != "output":
-                raise ValueError(f"Output key not found in result. Tried '{output_key}' and 'output'.")
-            else:
-                raise ValueError("Output key not found in result. Tried 'output'.")
-
-        return result.get("output")
diff --git a/src/backend/langflow/components/experimental/FlowTool.py b/src/backend/langflow/components/experimental/FlowTool.py
deleted file mode 100644
index 6dd3e4fa3f..0000000000
--- a/src/backend/langflow/components/experimental/FlowTool.py
+++ /dev/null
@@ -1,84 +0,0 @@
-from typing import Any, List, Optional, Text
-
-from langchain_core.tools import StructuredTool
-from langflow.custom import CustomComponent
-from langflow.field_typing import Tool
-from langflow.graph.graph.base import Graph
-from langflow.helpers.flow import build_function_and_schema
-from langflow.schema.dotdict import dotdict
-from loguru import logger
-
-
-class FlowToolComponent(CustomComponent):
-    display_name = "Flow as Tool"
-    description = "Construct a Tool from a function that runs the loaded Flow."
-    field_order = ["flow_name", "name", "description", "return_direct"]
-
-    def get_flow_names(self) -> List[str]:
-        flow_records = self.list_flows()
-        return [flow_record.data["name"] for flow_record in flow_records]
-
-    def get_flow(self, flow_name: str) -> Optional[Text]:
-        """
-        Retrieves a flow by its name.
-
-        Args:
-            flow_name (str): The name of the flow to retrieve.
-
-        Returns:
-            Optional[Text]: The flow record if found, None otherwise.
-        """
-        flow_records = self.list_flows()
-        for flow_record in flow_records:
-            if flow_record.data["name"] == flow_name:
-                return flow_record
-        return None
-
-    def update_build_config(self, build_config: dotdict, field_value: Any, field_name: str | None = None):
-        logger.debug(f"Updating build config with field value {field_value} and field name {field_name}")
-        if field_name == "flow_name":
-            build_config["flow_name"]["options"] = self.get_flow_names()
-
-        return build_config
-
-    def build_config(self):
-        return {
-            "flow_name": {
-                "display_name": "Flow Name",
-                "info": "The name of the flow to run.",
-                "options": [],
-                "real_time_refresh": True,
-                "refresh_button": True,
-            },
-            "name": {
-                "display_name": "Name",
-                "description": "The name of the tool.",
-            },
-            "description": {
-                "display_name": "Description",
-                "description": "The description of the tool.",
-            },
-            "return_direct": {
-                "display_name": "Return Direct",
-                "description": "Return the result directly from the Tool.",
-                "advanced": True,
-            },
-        }
-
-    async def build(self, flow_name: str, name: str, description: str, return_direct: bool = False) -> Tool:
-        flow_record = self.get_flow(flow_name)
-        if not flow_record:
-            raise ValueError("Flow not found.")
-        graph = Graph.from_payload(flow_record.data["data"])
-        dynamic_flow_function, schema = build_function_and_schema(flow_record, graph)
-        tool = StructuredTool.from_function(
-            coroutine=dynamic_flow_function,
-            name=name,
-            description=description,
-            return_direct=return_direct,
-            args_schema=schema,
-        )
-        description_repr = repr(tool.description).strip("'")
-        args_str = "\n".join([f"- {arg_name}: {arg_data['description']}" for arg_name, arg_data in tool.args.items()])
-        self.status = f"{description_repr}\nArguments:\n{args_str}"
-        return tool
diff --git a/src/backend/langflow/components/experimental/Schema.py b/src/backend/langflow/components/experimental/Schema.py
deleted file mode 100644
index 72cbec23e2..0000000000
--- a/src/backend/langflow/components/experimental/Schema.py
+++ /dev/null
@@ -1,25 +0,0 @@
-from langflow.custom import CustomComponent
-
-
-class SchemaComponent(CustomComponent):
-    display_name = "Schema"
-    description = "Construct a Schema from a list of fields."
-
-    def build_config(self):
-        return {
-            "fields": {
-                "display_name": "Fields",
-                "info": "The fields to include in the schema.",
-            },
-            "name": {
-                "display_name": "Name",
-                "info": "The name of the schema.",
-            },
-        }
-
-    def build(self, name: str, fields: list[dict]):
-        # The idea for this component is to use create_model from pydantic to create a schema
-        # from a list of fields. This will be useful for creating schemas for the flow tool.
-        pass
-
-        # field is a simple list of dictionaries with the field name and
diff --git a/src/backend/langflow/components/tools/SearchAPITool.py b/src/backend/langflow/components/tools/SearchAPITool.py
deleted file mode 100644
index 2ecee90e72..0000000000
--- a/src/backend/langflow/components/tools/SearchAPITool.py
+++ /dev/null
@@ -1,36 +0,0 @@
-from langchain_community.tools.searchapi import SearchAPIRun
-from langchain_community.utilities.searchapi import SearchApiAPIWrapper
-from langflow.custom import CustomComponent
-from langflow.field_typing import Tool
-
-
-class SearchApiToolComponent(CustomComponent):
-    display_name: str = "SearchApi Tool"
-    description: str = "Real-time search engine results API."
-    documentation: str = "https://www.searchapi.io/docs/google"
-    field_config = {
-        "engine": {
-            "display_name": "Engine",
-            "field_type": "str",
-            "info": "The search engine to use.",
-        },
-        "api_key": {
-            "display_name": "API Key",
-            "field_type": "str",
-            "required": True,
-            "password": True,
-            "info": "The API key to use SearchApi.",
-        },
-    }
-
-    def build(
-        self,
-        engine: str,
-        api_key: str,
-    ) -> Tool:
-        search_api_wrapper = SearchApiAPIWrapper(engine=engine, searchapi_api_key=api_key)
-
-        tool = SearchAPIRun(api_wrapper=search_api_wrapper)
-
-        self.status = tool
-        return tool
diff --git a/src/backend/langflow/base/agents/__init__.py b/src/backend/langflow/py.typed
similarity index 100%
rename from src/backend/langflow/base/agents/__init__.py
rename to src/backend/langflow/py.typed
diff --git a/src/backend/base/langflow/version.py b/src/backend/langflow/version.py
similarity index 100%
rename from src/backend/base/langflow/version.py
rename to src/backend/langflow/version.py

From b603d73c62f58090b55a7b749116e8b5f3d3bf8a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 23:10:22 -0300
Subject: [PATCH 79/83] Add version module and update imports

---
 src/backend/base/langflow/__main__.py             |  5 +----
 src/backend/base/langflow/api/utils.py            |  2 +-
 src/backend/base/langflow/api/v1/endpoints.py     |  2 +-
 src/backend/base/langflow/base/agents/agent.py    | 15 +++++++++------
 src/backend/base/langflow/base/models/model.py    |  4 ++--
 .../langflow/components/experimental/FlowTool.py  |  7 ++++---
 .../langflow/components/experimental/SubFlow.py   | 13 +++----------
 src/backend/base/langflow/graph/graph/base.py     |  4 ++--
 src/backend/base/langflow/helpers/__init__py      |  3 ---
 src/backend/langflow/py.typed                     |  0
 src/backend/langflow/version/__init__.py          |  1 +
 src/backend/langflow/{ => version}/version.py     |  3 +--
 12 files changed, 25 insertions(+), 34 deletions(-)
 delete mode 100644 src/backend/base/langflow/helpers/__init__py
 delete mode 100644 src/backend/langflow/py.typed
 create mode 100644 src/backend/langflow/version/__init__.py
 rename src/backend/langflow/{ => version}/version.py (53%)

diff --git a/src/backend/base/langflow/__main__.py b/src/backend/base/langflow/__main__.py
index 5acc85b730..c3fb5bd377 100644
--- a/src/backend/base/langflow/__main__.py
+++ b/src/backend/base/langflow/__main__.py
@@ -9,10 +9,7 @@
 import httpx
 import typer
 from dotenv import load_dotenv
-from multiprocess import (  # noqa
-    Process,  # noqa
-    cpu_count,  # noqa; type: ignore
-)
+from multiprocess import Process, cpu_count  # type: ignore
 from rich import box
 from rich import print as rprint
 from rich.console import Console
diff --git a/src/backend/base/langflow/api/utils.py b/src/backend/base/langflow/api/utils.py
index ef315eb7ff..27576e9714 100644
--- a/src/backend/base/langflow/api/utils.py
+++ b/src/backend/base/langflow/api/utils.py
@@ -164,7 +164,7 @@ def get_is_component_from_data(data: dict):
 
 
 async def check_langflow_version(component: StoreComponentCreate):
-    from langflow.version import __version__ as current_version
+    from langflow.version.version import __version__ as current_version  # type: ignore
 
     if not component.last_tested_version:
         component.last_tested_version = current_version
diff --git a/src/backend/base/langflow/api/v1/endpoints.py b/src/backend/base/langflow/api/v1/endpoints.py
index 7886321f73..16dcdca708 100644
--- a/src/backend/base/langflow/api/v1/endpoints.py
+++ b/src/backend/base/langflow/api/v1/endpoints.py
@@ -239,7 +239,7 @@ async def create_upload_file(
 # get endpoint to return version of langflow
 @router.get("/version")
 def get_version():
-    from langflow.version import __version__
+    from langflow.version import __version__  # type: ignore
 
     return {"version": __version__}
 
diff --git a/src/backend/base/langflow/base/agents/agent.py b/src/backend/base/langflow/base/agents/agent.py
index 28767a59a5..5ef498b665 100644
--- a/src/backend/base/langflow/base/agents/agent.py
+++ b/src/backend/base/langflow/base/agents/agent.py
@@ -1,7 +1,6 @@
-from typing import List, Union
+from typing import List, Optional, Union, cast
 
 from langchain.agents import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
-
 from langchain_core.runnables import Runnable
 
 from langflow.custom import CustomComponent
@@ -45,7 +44,7 @@ async def run_agent(
         inputs: str,
         input_variables: list[str],
         tools: List[Tool],
-        memory: BaseMemory = None,
+        memory: Optional[BaseMemory] = None,
         handle_parsing_errors: bool = True,
         output_key: str = "output",
     ) -> Text:
@@ -53,7 +52,11 @@ async def run_agent(
             runnable = agent
         else:
             runnable = AgentExecutor.from_agent_and_tools(
-                agent=agent, tools=tools, verbose=True, memory=memory, handle_parsing_errors=handle_parsing_errors
+                agent=agent,  # type: ignore
+                tools=tools,
+                verbose=True,
+                memory=memory,
+                handle_parsing_errors=handle_parsing_errors,
             )
         input_dict = {"input": inputs}
         for var in input_variables:
@@ -62,11 +65,11 @@ async def run_agent(
         result = await runnable.ainvoke(input_dict)
         self.status = result
         if output_key in result:
-            return result.get(output_key)
+            return cast(str, result.get(output_key))
         elif "output" not in result:
             if output_key != "output":
                 raise ValueError(f"Output key not found in result. Tried '{output_key}' and 'output'.")
             else:
                 raise ValueError("Output key not found in result. Tried 'output'.")
 
-        return result.get("output")
+        return cast(str, result.get("output"))
diff --git a/src/backend/base/langflow/base/models/model.py b/src/backend/base/langflow/base/models/model.py
index 8beeef59a4..7bbd614d68 100644
--- a/src/backend/base/langflow/base/models/model.py
+++ b/src/backend/base/langflow/base/models/model.py
@@ -40,9 +40,9 @@ def get_chat_result(
         if input_value:
             messages.append(HumanMessage(content=input_value))
         if stream:
-            result = runnable.stream(messages)
+            return runnable.stream(messages)
         else:
             message = runnable.invoke(messages)
             result = message.content
             self.status = result
-        return result
+            return result
diff --git a/src/backend/base/langflow/components/experimental/FlowTool.py b/src/backend/base/langflow/components/experimental/FlowTool.py
index 541341d85a..ac48a0f038 100644
--- a/src/backend/base/langflow/components/experimental/FlowTool.py
+++ b/src/backend/base/langflow/components/experimental/FlowTool.py
@@ -1,4 +1,4 @@
-from typing import Any, List, Optional, Text
+from typing import Any, List, Optional
 
 from langchain_core.tools import StructuredTool
 from loguru import logger
@@ -8,6 +8,7 @@
 from langflow.graph.graph.base import Graph
 from langflow.helpers.flow import build_function_and_schema
 from langflow.schema.dotdict import dotdict
+from langflow.schema.schema import Record
 
 
 class FlowToolComponent(CustomComponent):
@@ -19,7 +20,7 @@ def get_flow_names(self) -> List[str]:
         flow_records = self.list_flows()
         return [flow_record.data["name"] for flow_record in flow_records]
 
-    def get_flow(self, flow_name: str) -> Optional[Text]:
+    def get_flow(self, flow_name: str) -> Optional[Record]:
         """
         Retrieves a flow by its name.
 
@@ -82,4 +83,4 @@ async def build(self, flow_name: str, name: str, description: str, return_direct
         description_repr = repr(tool.description).strip("'")
         args_str = "\n".join([f"- {arg_name}: {arg_data['description']}" for arg_name, arg_data in tool.args.items()])
         self.status = f"{description_repr}\nArguments:\n{args_str}"
-        return tool
+        return tool  # type: ignore
diff --git a/src/backend/base/langflow/components/experimental/SubFlow.py b/src/backend/base/langflow/components/experimental/SubFlow.py
index 9f9abded3d..af309fa883 100644
--- a/src/backend/base/langflow/components/experimental/SubFlow.py
+++ b/src/backend/base/langflow/components/experimental/SubFlow.py
@@ -1,5 +1,6 @@
 from typing import Any, List, Optional
 
+from langflow.helpers.flow import get_flow_inputs
 from loguru import logger
 
 from langflow.custom import CustomComponent
@@ -43,7 +44,7 @@ def update_build_config(self, build_config: dotdict, field_value: Any, field_nam
                     raise ValueError(f"Flow {field_value} not found.")
                 graph = Graph.from_payload(flow_record.data["data"])
                 # Get all inputs from the graph
-                inputs = self.get_flow_inputs(graph)
+                inputs = get_flow_inputs(graph)
                 # Add inputs to the build config
                 build_config = self.add_inputs_to_build_config(inputs, build_config)
             except Exception as e:
@@ -51,14 +52,6 @@ def update_build_config(self, build_config: dotdict, field_value: Any, field_nam
 
         return build_config
 
-    def get_flow_inputs(self, graph: Graph) -> List[Vertex]:
-        inputs = []
-        for vertex in graph.vertices:
-            if vertex.is_input:
-                inputs.append((vertex.id, vertex.display_name, vertex.description))
-        logger.debug(inputs)
-        return inputs
-
     def add_inputs_to_build_config(self, inputs: List[Vertex], build_config: dotdict):
         new_fields: list[TemplateField] = []
         for vertex in inputs:
@@ -116,7 +109,7 @@ async def build(self, flow_name: str, **kwargs) -> List[Record]:
         run_output = run_outputs[0]
 
         records = []
-        if run_outputs is not None:
+        if run_output is not None:
             for output in run_output.outputs:
                 if output:
                     records.extend(self.build_records_from_result_data(output))
diff --git a/src/backend/base/langflow/graph/graph/base.py b/src/backend/base/langflow/graph/graph/base.py
index 0c00c2a2c7..00bb69f674 100644
--- a/src/backend/base/langflow/graph/graph/base.py
+++ b/src/backend/base/langflow/graph/graph/base.py
@@ -201,7 +201,7 @@ async def _run(
         self,
         inputs: Dict[str, str],
         input_components: list[str],
-        input_type: str,
+        input_type: Literal["chat", "text", "json", "any"] | None,
         outputs: list[str],
         stream: bool,
         session_id: str,
@@ -236,7 +236,7 @@ async def _run(
                     continue
                 # If the input_type is not any and the input_type is not in the vertex id
                 # Example: input_type = "chat" and vertex.id = "OpenAI-19ddn"
-                elif input_type != "any" and input_type not in vertex.id.lower():
+                elif input_type is not None and input_type != "any" and input_type not in vertex.id.lower():
                     continue
                 if vertex is None:
                     raise ValueError(f"Vertex {vertex_id} not found")
diff --git a/src/backend/base/langflow/helpers/__init__py b/src/backend/base/langflow/helpers/__init__py
deleted file mode 100644
index b944a01788..0000000000
--- a/src/backend/base/langflow/helpers/__init__py
+++ /dev/null
@@ -1,3 +0,0 @@
-from .record import docs_to_records, records_to_text
-
-__all__ = ["docs_to_records", "records_to_text"]
\ No newline at end of file
diff --git a/src/backend/langflow/py.typed b/src/backend/langflow/py.typed
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/backend/langflow/version/__init__.py b/src/backend/langflow/version/__init__.py
new file mode 100644
index 0000000000..5c0cf285cb
--- /dev/null
+++ b/src/backend/langflow/version/__init__.py
@@ -0,0 +1 @@
+from .version import __version__  # noqa: F401
diff --git a/src/backend/langflow/version.py b/src/backend/langflow/version/version.py
similarity index 53%
rename from src/backend/langflow/version.py
rename to src/backend/langflow/version/version.py
index c8bb365cac..3aaf5f9737 100644
--- a/src/backend/langflow/version.py
+++ b/src/backend/langflow/version/version.py
@@ -3,6 +3,5 @@
 try:
     __version__ = metadata.version(__package__)
 except metadata.PackageNotFoundError:
-    # Case where package metadata is not available.
     __version__ = ""
-del metadata  # optional, avoids polluting the results of dir(__package__)
+del metadata

From 56a485ef566b94073f49b67e6f5f7b6df7cc0f58 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 23:15:36 -0300
Subject: [PATCH 80/83] Update packages include path in pyproject.toml

---
 src/backend/base/pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/base/pyproject.toml b/src/backend/base/pyproject.toml
index d32780505c..df6daa0dcf 100644
--- a/src/backend/base/pyproject.toml
+++ b/src/backend/base/pyproject.toml
@@ -17,7 +17,7 @@ repository = "https://github.com/logspace-ai/langflow"
 license = "MIT"
 readme = "README.md"
 keywords = ["nlp", "langchain", "openai", "gpt", "gui"]
-packages = [{ include = "langflow" }, { include = "py.typed" }]
+packages = [{ include = "langflow" }, { include = "langflow/py.typed" }]
 include = ["pyproject.toml", "README.md", "langflow/**/*"]
 documentation = "https://docs.langflow.org"
 

From 2bc6d99ad466341e8f52ecf8a3fcd1bdac3fe428 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 23:17:51 -0300
Subject: [PATCH 81/83] Update Poetry version to 1.8.2

---
 .github/workflows/lint.yml | 3 +--
 .github/workflows/test.yml | 2 +-
 deploy/base.Dockerfile     | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index d4eaafb95f..8be55150cc 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -14,7 +14,7 @@ on:
       - "src/backend/**"
 
 env:
-  POETRY_VERSION: "1.7.0"
+  POETRY_VERSION: "1.8.2"
 
 jobs:
   lint:
@@ -22,7 +22,6 @@ jobs:
     strategy:
       matrix:
         python-version:
-          - "3.9"
           - "3.10"
           - "3.11"
     steps:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 10ab9b3244..629633f23d 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -15,7 +15,7 @@ on:
       - "src/backend/**"
 
 env:
-  POETRY_VERSION: "1.5.0"
+  POETRY_VERSION: "1.8.2"
 
 jobs:
   build:
diff --git a/deploy/base.Dockerfile b/deploy/base.Dockerfile
index 323663283f..58fae3dab3 100644
--- a/deploy/base.Dockerfile
+++ b/deploy/base.Dockerfile
@@ -23,7 +23,7 @@ ENV PYTHONUNBUFFERED=1 \
     \
     # poetry
     # https://python-poetry.org/docs/configuration/#using-environment-variables
-    POETRY_VERSION=1.5.1 \
+    POETRY_VERSION=1.8.2 \
     # make poetry install to this location
     POETRY_HOME="/opt/poetry" \
     # make poetry create the virtual environment in the project's root

From eaf2479c871f32b2de60f2c6791a052873525068 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 23:18:44 -0300
Subject: [PATCH 82/83] Update function signature, refactor code, add new
 langflow helper functions and files, and add version module (#1570)

* Update function signature and import statements

* Refactor code and fix bugs

* Add new langflow helper functions and remove base model component

* Add new files and modify existing files

* Add version module and update imports

* Update packages include path in pyproject.toml

* Update Poetry version to 1.8.2
---
 .github/workflows/lint.yml                    |   3 +-
 .github/workflows/test.yml                    |   2 +-
 deploy/base.Dockerfile                        |   2 +-
 src/backend/base/langflow/__main__.py         |   5 +-
 .../base/langflow/alembic/helpers/flow.py     | 199 ------------------
 .../base/langflow/alembic/helpers/record.py   |  34 ---
 src/backend/base/langflow/api/utils.py        |   2 +-
 src/backend/base/langflow/api/v1/endpoints.py |   2 +-
 .../base/langflow/base/agents/agent.py        |  16 +-
 .../base/langflow/base/models/model.py        |  14 +-
 .../langflow/components/agents/XMLAgent.py    |   4 +-
 .../components/embeddings/CohereEmbeddings.py |   2 +-
 .../components/embeddings/OpenAIEmbeddings.py |   5 +-
 .../components/experimental/FlowTool.py       |   7 +-
 .../components/experimental/SubFlow.py        |  35 ++-
 .../components/models/AzureOpenAIModel.py     |   6 +-
 .../components/models/base/__init__.py        |   3 -
 .../components/tools/SearchAPITool.py         |   2 +-
 .../components/vectorstores/AstraDB.py        |   9 +-
 .../components/vectorstores/AstraDBSearch.py  |   6 +-
 .../vectorstores/MongoDBAtlasVectorSearch.py  |   9 +-
 src/backend/base/langflow/graph/graph/base.py |  24 ++-
 .../graph/graph/runnable_vertices_manager.py  |   6 +-
 .../{alembic => }/helpers/__init__.py         |   0
 src/backend/base/langflow/helpers/__init__py  |   3 -
 src/backend/base/langflow/helpers/flow.py     |  22 +-
 .../custom_component/custom_component.py      |   6 +-
 .../langflow/interface/initialize/loading.py  |   6 +-
 .../base/langflow/interface/tools/base.py     |   2 -
 .../base/langflow/legacy_custom/customs.py    |   2 +-
 .../base/langflow/processing/process.py       |   2 +-
 src/backend/base/langflow/services/factory.py |   4 +-
 .../base/langflow/services/settings/auth.py   |  14 +-
 .../template/frontend_node/__init__.py        |   2 +
 src/backend/base/pyproject.toml               |   2 +-
 src/backend/langflow/base/agents/__init__.py  |   0
 src/backend/langflow/base/agents/agent.py     |  70 ------
 src/backend/langflow/base/models/__init__.py  |   3 -
 src/backend/langflow/base/models/model.py     |  48 -----
 .../components/experimental/FlowTool.py       |  85 --------
 .../components/experimental/Schema.py         |  25 ---
 .../components/tools/SearchAPITool.py         |  37 ----
 src/backend/langflow/version/__init__.py      |   1 +
 .../langflow => langflow/version}/version.py  |   3 +-
 44 files changed, 121 insertions(+), 613 deletions(-)
 delete mode 100644 src/backend/base/langflow/alembic/helpers/flow.py
 delete mode 100644 src/backend/base/langflow/alembic/helpers/record.py
 delete mode 100644 src/backend/base/langflow/components/models/base/__init__.py
 rename src/backend/base/langflow/{alembic => }/helpers/__init__.py (100%)
 delete mode 100644 src/backend/base/langflow/helpers/__init__py
 delete mode 100644 src/backend/langflow/base/agents/__init__.py
 delete mode 100644 src/backend/langflow/base/agents/agent.py
 delete mode 100644 src/backend/langflow/base/models/__init__.py
 delete mode 100644 src/backend/langflow/base/models/model.py
 delete mode 100644 src/backend/langflow/components/experimental/FlowTool.py
 delete mode 100644 src/backend/langflow/components/experimental/Schema.py
 delete mode 100644 src/backend/langflow/components/tools/SearchAPITool.py
 create mode 100644 src/backend/langflow/version/__init__.py
 rename src/backend/{base/langflow => langflow/version}/version.py (53%)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index d4eaafb95f..8be55150cc 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -14,7 +14,7 @@ on:
       - "src/backend/**"
 
 env:
-  POETRY_VERSION: "1.7.0"
+  POETRY_VERSION: "1.8.2"
 
 jobs:
   lint:
@@ -22,7 +22,6 @@ jobs:
     strategy:
       matrix:
         python-version:
-          - "3.9"
           - "3.10"
           - "3.11"
     steps:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 10ab9b3244..629633f23d 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -15,7 +15,7 @@ on:
       - "src/backend/**"
 
 env:
-  POETRY_VERSION: "1.5.0"
+  POETRY_VERSION: "1.8.2"
 
 jobs:
   build:
diff --git a/deploy/base.Dockerfile b/deploy/base.Dockerfile
index 323663283f..58fae3dab3 100644
--- a/deploy/base.Dockerfile
+++ b/deploy/base.Dockerfile
@@ -23,7 +23,7 @@ ENV PYTHONUNBUFFERED=1 \
     \
     # poetry
     # https://python-poetry.org/docs/configuration/#using-environment-variables
-    POETRY_VERSION=1.5.1 \
+    POETRY_VERSION=1.8.2 \
     # make poetry install to this location
     POETRY_HOME="/opt/poetry" \
     # make poetry create the virtual environment in the project's root
diff --git a/src/backend/base/langflow/__main__.py b/src/backend/base/langflow/__main__.py
index 356a7e7cd4..c3fb5bd377 100644
--- a/src/backend/base/langflow/__main__.py
+++ b/src/backend/base/langflow/__main__.py
@@ -9,10 +9,7 @@
 import httpx
 import typer
 from dotenv import load_dotenv
-from multiprocess import (
-    Process,  # type: ignore
-    cpu_count,  # type: ignore
-)
+from multiprocess import Process, cpu_count  # type: ignore
 from rich import box
 from rich import print as rprint
 from rich.console import Console
diff --git a/src/backend/base/langflow/alembic/helpers/flow.py b/src/backend/base/langflow/alembic/helpers/flow.py
deleted file mode 100644
index 328e99ca16..0000000000
--- a/src/backend/base/langflow/alembic/helpers/flow.py
+++ /dev/null
@@ -1,199 +0,0 @@
-from typing import TYPE_CHECKING, Any, Callable, Coroutine, List, Optional, Tuple, Union
-
-from pydantic.v1 import BaseModel, Field, create_model
-from sqlmodel import select
-
-from langflow.schema.schema import INPUT_FIELD_NAME, Record
-from langflow.services.database.models.flow.model import Flow
-from langflow.services.deps import session_scope
-
-if TYPE_CHECKING:
-    from langflow.graph.graph.base import Graph
-    from langflow.graph.vertex.base import Vertex
-
-INPUT_TYPE_MAP = {
-    "ChatInput": {"type_hint": "Optional[str]", "default": '""'},
-    "TextInput": {"type_hint": "Optional[str]", "default": '""'},
-    "JSONInput": {"type_hint": "Optional[dict]", "default": "{}"},
-}
-
-
-def list_flows(*, user_id: Optional[str] = None) -> List[Record]:
-    if not user_id:
-        raise ValueError("Session is invalid")
-    try:
-        with session_scope() as session:
-            flows = session.exec(
-                select(Flow).where(Flow.user_id == user_id).where(Flow.is_component == False)  # noqa
-            ).all()
-
-            flows_records = [flow.to_record() for flow in flows]
-            return flows_records
-    except Exception as e:
-        raise ValueError(f"Error listing flows: {e}")
-
-
-async def load_flow(
-    user_id: str, flow_id: Optional[str] = None, flow_name: Optional[str] = None, tweaks: Optional[dict] = None
-) -> "Graph":
-    from langflow.graph.graph.base import Graph
-    from langflow.processing.process import process_tweaks
-
-    if not flow_id and not flow_name:
-        raise ValueError("Flow ID or Flow Name is required")
-    if not flow_id and flow_name:
-        flow_id = find_flow(flow_name, user_id)
-        if not flow_id:
-            raise ValueError(f"Flow {flow_name} not found")
-
-    with session_scope() as session:
-        graph_data = flow.data if (flow := session.get(Flow, flow_id)) else None
-    if not graph_data:
-        raise ValueError(f"Flow {flow_id} not found")
-    if tweaks:
-        graph_data = process_tweaks(graph_data=graph_data, tweaks=tweaks)
-    graph = Graph.from_payload(graph_data, flow_id=flow_id)
-    return graph
-
-
-def find_flow(flow_name: str, user_id: str) -> Optional[str]:
-    with session_scope() as session:
-        flow = session.exec(select(Flow).where(Flow.name == flow_name).where(Flow.user_id == user_id)).first()
-        return flow.id if flow else None
-
-
-async def run_flow(
-    inputs: Union[dict, List[dict]] = None,
-    tweaks: Optional[dict] = None,
-    flow_id: Optional[str] = None,
-    flow_name: Optional[str] = None,
-    user_id: Optional[str] = None,
-) -> Any:
-    graph = await load_flow(user_id, flow_id, flow_name, tweaks)
-
-    if inputs is None:
-        inputs = []
-    inputs_list = []
-    inputs_components = []
-    types = []
-    for input_dict in inputs:
-        inputs_list.append({INPUT_FIELD_NAME: input_dict.get("input_value")})
-        inputs_components.append(input_dict.get("components", []))
-        types.append(input_dict.get("type", []))
-
-    return await graph.arun(inputs_list, inputs_components=inputs_components, types=types)
-
-
-def generate_function_for_flow(inputs: List["Vertex"], flow_id: str) -> Coroutine:
-    """
-    Generate a dynamic flow function based on the given inputs and flow ID.
-
-    Args:
-        inputs (List[Vertex]): The list of input vertices for the flow.
-        flow_id (str): The ID of the flow.
-
-    Returns:
-        Coroutine: The dynamic flow function.
-
-    Raises:
-        None
-
-    Example:
-        inputs = [vertex1, vertex2]
-        flow_id = "my_flow"
-        function = generate_function_for_flow(inputs, flow_id)
-        result = function(input1, input2)
-    """
-    # Prepare function arguments with type hints and default values
-    args = [
-        f"{input_.display_name.lower().replace(' ', '_')}: {INPUT_TYPE_MAP[input_.base_name]['type_hint']} = {INPUT_TYPE_MAP[input_.base_name]['default']}"
-        for input_ in inputs
-    ]
-
-    # Maintain original argument names for constructing the tweaks dictionary
-    original_arg_names = [input_.display_name for input_ in inputs]
-
-    # Prepare a Pythonic, valid function argument string
-    func_args = ", ".join(args)
-
-    # Map original argument names to their corresponding Pythonic variable names in the function
-    arg_mappings = ", ".join(
-        f'"{original_name}": {name}'
-        for original_name, name in zip(original_arg_names, [arg.split(":")[0] for arg in args])
-    )
-
-    func_body = f"""
-from typing import Optional
-async def flow_function({func_args}):
-    tweaks = {{ {arg_mappings} }}
-    from langflow.helpers.flow import run_flow
-    from langchain_core.tools import ToolException
-    try:
-        return await run_flow(
-            tweaks={{key: {{'input_value': value}} for key, value in tweaks.items()}},
-            flow_id="{flow_id}",
-        )
-    except Exception as e:
-        raise ToolException(f'Error running flow: ' + e)
-"""
-
-    compiled_func = compile(func_body, "<string>", "exec")
-    local_scope = {}
-    exec(compiled_func, globals(), local_scope)
-    return local_scope["flow_function"]
-
-
-def build_function_and_schema(flow_record: Record, graph: "Graph") -> Tuple[Callable, BaseModel]:
-    """
-    Builds a dynamic function and schema for a given flow.
-
-    Args:
-        flow_record (Record): The flow record containing information about the flow.
-        graph (Graph): The graph representing the flow.
-
-    Returns:
-        Tuple[Callable, BaseModel]: A tuple containing the dynamic function and the schema.
-    """
-    flow_id = flow_record.id
-    inputs = get_flow_inputs(graph)
-    dynamic_flow_function = generate_function_for_flow(inputs, flow_id)
-    schema = build_schema_from_inputs(flow_record.name, inputs)
-    return dynamic_flow_function, schema
-
-
-def get_flow_inputs(graph: "Graph") -> List["Vertex"]:
-    """
-    Retrieves the flow inputs from the given graph.
-
-    Args:
-        graph (Graph): The graph object representing the flow.
-
-    Returns:
-        List[Record]: A list of input records, where each record contains the ID, name, and description of the input vertex.
-    """
-    inputs = []
-    for vertex in graph.vertices:
-        if vertex.is_input:
-            inputs.append(vertex)
-    return inputs
-
-
-def build_schema_from_inputs(name: str, inputs: List[tuple[str, str, str]]) -> BaseModel:
-    """
-    Builds a schema from the given inputs.
-
-    Args:
-        name (str): The name of the schema.
-        inputs (List[tuple[str, str, str]]): A list of tuples representing the inputs.
-            Each tuple contains three elements: the input name, the input type, and the input description.
-
-    Returns:
-        BaseModel: The schema model.
-
-    """
-    fields = {}
-    for input_ in inputs:
-        field_name = input_.display_name.lower().replace(" ", "_")
-        description = input_.description
-        fields[field_name] = (str, Field(default="", description=description))
-    return create_model(name, **fields)
diff --git a/src/backend/base/langflow/alembic/helpers/record.py b/src/backend/base/langflow/alembic/helpers/record.py
deleted file mode 100644
index d7b1d2b060..0000000000
--- a/src/backend/base/langflow/alembic/helpers/record.py
+++ /dev/null
@@ -1,34 +0,0 @@
-from langchain_core.documents import Document
-
-from langflow.schema import Record
-
-
-def docs_to_records(documents: list[Document]) -> list[Record]:
-    """
-    Converts a list of Documents to a list of Records.
-
-    Args:
-        documents (list[Document]): The list of Documents to convert.
-
-    Returns:
-        list[Record]: The converted list of Records.
-    """
-    return [Record.from_document(document) for document in documents]
-
-
-def records_to_text(template: str, records: list[Record]) -> str:
-    """
-    Converts a list of Records to a list of texts.
-
-    Args:
-        records (list[Record]): The list of Records to convert.
-
-    Returns:
-        list[str]: The converted list of texts.
-    """
-    if isinstance(records, Record):
-        records = [records]
-    # Check if there are any format strings in the template
-
-    formated_records = [template.format(data=record.data, **record.data) for record in records]
-    return "\n".join(formated_records)
diff --git a/src/backend/base/langflow/api/utils.py b/src/backend/base/langflow/api/utils.py
index c03a724a70..27576e9714 100644
--- a/src/backend/base/langflow/api/utils.py
+++ b/src/backend/base/langflow/api/utils.py
@@ -164,7 +164,7 @@ def get_is_component_from_data(data: dict):
 
 
 async def check_langflow_version(component: StoreComponentCreate):
-    from langflow import __version__ as current_version
+    from langflow.version.version import __version__ as current_version  # type: ignore
 
     if not component.last_tested_version:
         component.last_tested_version = current_version
diff --git a/src/backend/base/langflow/api/v1/endpoints.py b/src/backend/base/langflow/api/v1/endpoints.py
index 7886321f73..16dcdca708 100644
--- a/src/backend/base/langflow/api/v1/endpoints.py
+++ b/src/backend/base/langflow/api/v1/endpoints.py
@@ -239,7 +239,7 @@ async def create_upload_file(
 # get endpoint to return version of langflow
 @router.get("/version")
 def get_version():
-    from langflow.version import __version__
+    from langflow.version import __version__  # type: ignore
 
     return {"version": __version__}
 
diff --git a/src/backend/base/langflow/base/agents/agent.py b/src/backend/base/langflow/base/agents/agent.py
index d0ce82d767..5ef498b665 100644
--- a/src/backend/base/langflow/base/agents/agent.py
+++ b/src/backend/base/langflow/base/agents/agent.py
@@ -1,10 +1,10 @@
-from typing import List, Union
+from typing import List, Optional, Union, cast
 
 from langchain.agents import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
 from langchain_core.runnables import Runnable
 
+from langflow.custom import CustomComponent
 from langflow.field_typing import BaseMemory, Text, Tool
-from langflow.interface.custom.custom_component import CustomComponent
 
 
 class LCAgentComponent(CustomComponent):
@@ -44,7 +44,7 @@ async def run_agent(
         inputs: str,
         input_variables: list[str],
         tools: List[Tool],
-        memory: BaseMemory = None,
+        memory: Optional[BaseMemory] = None,
         handle_parsing_errors: bool = True,
         output_key: str = "output",
     ) -> Text:
@@ -52,7 +52,11 @@ async def run_agent(
             runnable = agent
         else:
             runnable = AgentExecutor.from_agent_and_tools(
-                agent=agent, tools=tools, verbose=True, memory=memory, handle_parsing_errors=handle_parsing_errors
+                agent=agent,  # type: ignore
+                tools=tools,
+                verbose=True,
+                memory=memory,
+                handle_parsing_errors=handle_parsing_errors,
             )
         input_dict = {"input": inputs}
         for var in input_variables:
@@ -61,11 +65,11 @@ async def run_agent(
         result = await runnable.ainvoke(input_dict)
         self.status = result
         if output_key in result:
-            return result.get(output_key)
+            return cast(str, result.get(output_key))
         elif "output" not in result:
             if output_key != "output":
                 raise ValueError(f"Output key not found in result. Tried '{output_key}' and 'output'.")
             else:
                 raise ValueError("Output key not found in result. Tried 'output'.")
 
-        return result.get("output")
+        return cast(str, result.get("output"))
diff --git a/src/backend/base/langflow/base/models/model.py b/src/backend/base/langflow/base/models/model.py
index 4e3a422b2b..7bbd614d68 100644
--- a/src/backend/base/langflow/base/models/model.py
+++ b/src/backend/base/langflow/base/models/model.py
@@ -1,10 +1,10 @@
-from typing import Optional
+from typing import Optional, Union
 
 from langchain_core.language_models.chat_models import BaseChatModel
 from langchain_core.language_models.llms import LLM
 from langchain_core.messages import HumanMessage, SystemMessage
 
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow.custom import CustomComponent
 
 
 class LCModelComponent(CustomComponent):
@@ -34,15 +34,15 @@ def get_result(self, runnable: LLM, stream: bool, input_value: str):
     def get_chat_result(
         self, runnable: BaseChatModel, stream: bool, input_value: str, system_message: Optional[str] = None
     ):
-        messages = []
+        messages: list[Union[HumanMessage, SystemMessage]] = []
         if system_message:
-            messages.append(SystemMessage(system_message))
+            messages.append(SystemMessage(content=system_message))
         if input_value:
-            messages.append(HumanMessage(input_value))
+            messages.append(HumanMessage(content=input_value))
         if stream:
-            result = runnable.stream(messages)
+            return runnable.stream(messages)
         else:
             message = runnable.invoke(messages)
             result = message.content
             self.status = result
-        return result
+            return result
diff --git a/src/backend/base/langflow/components/agents/XMLAgent.py b/src/backend/base/langflow/components/agents/XMLAgent.py
index efd5cc0105..687bfff6fc 100644
--- a/src/backend/base/langflow/components/agents/XMLAgent.py
+++ b/src/backend/base/langflow/components/agents/XMLAgent.py
@@ -1,4 +1,4 @@
-from typing import List
+from typing import List, Optional
 
 from langchain.agents import create_xml_agent
 from langchain_core.prompts import PromptTemplate
@@ -69,7 +69,7 @@ async def build(
         llm: BaseLLM,
         tools: List[Tool],
         prompt: str,
-        memory: BaseMemory = None,
+        memory: Optional[BaseMemory] = None,
         tool_template: str = "{name}: {description}",
         handle_parsing_errors: bool = True,
     ) -> Text:
diff --git a/src/backend/base/langflow/components/embeddings/CohereEmbeddings.py b/src/backend/base/langflow/components/embeddings/CohereEmbeddings.py
index 07b21dabe2..e7c7739075 100644
--- a/src/backend/base/langflow/components/embeddings/CohereEmbeddings.py
+++ b/src/backend/base/langflow/components/embeddings/CohereEmbeddings.py
@@ -22,7 +22,7 @@ def build(
         self,
         request_timeout: Optional[float] = None,
         cohere_api_key: str = "",
-        max_retries: Optional[int] = None,
+        max_retries: int = 3,
         model: str = "embed-english-v2.0",
         truncate: Optional[str] = None,
         user_agent: str = "langchain",
diff --git a/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py b/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
index 3578caef79..a7fc838b33 100644
--- a/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
+++ b/src/backend/base/langflow/components/embeddings/OpenAIEmbeddings.py
@@ -1,7 +1,6 @@
 from typing import Any, Callable, Dict, List, Optional, Union
 
 from langchain_openai.embeddings.base import OpenAIEmbeddings
-from pydantic.v1.types import SecretStr
 
 from langflow.field_typing import NestedDict
 from langflow.interface.custom.custom_component import CustomComponent
@@ -100,8 +99,6 @@ def build(
         if disallowed_special == ["all"]:
             disallowed_special = "all"  # type: ignore
 
-        api_key = SecretStr(openai_api_key) if openai_api_key else None
-
         return OpenAIEmbeddings(
             tiktoken_enabled=tiktoken_enable,
             default_headers=default_headers,
@@ -116,7 +113,7 @@ def build(
             model=model,
             model_kwargs=model_kwargs,
             base_url=openai_api_base,
-            api_key=api_key,
+            api_key=openai_api_key,
             openai_api_type=openai_api_type,
             api_version=openai_api_version,
             organization=openai_organization,
diff --git a/src/backend/base/langflow/components/experimental/FlowTool.py b/src/backend/base/langflow/components/experimental/FlowTool.py
index 541341d85a..ac48a0f038 100644
--- a/src/backend/base/langflow/components/experimental/FlowTool.py
+++ b/src/backend/base/langflow/components/experimental/FlowTool.py
@@ -1,4 +1,4 @@
-from typing import Any, List, Optional, Text
+from typing import Any, List, Optional
 
 from langchain_core.tools import StructuredTool
 from loguru import logger
@@ -8,6 +8,7 @@
 from langflow.graph.graph.base import Graph
 from langflow.helpers.flow import build_function_and_schema
 from langflow.schema.dotdict import dotdict
+from langflow.schema.schema import Record
 
 
 class FlowToolComponent(CustomComponent):
@@ -19,7 +20,7 @@ def get_flow_names(self) -> List[str]:
         flow_records = self.list_flows()
         return [flow_record.data["name"] for flow_record in flow_records]
 
-    def get_flow(self, flow_name: str) -> Optional[Text]:
+    def get_flow(self, flow_name: str) -> Optional[Record]:
         """
         Retrieves a flow by its name.
 
@@ -82,4 +83,4 @@ async def build(self, flow_name: str, name: str, description: str, return_direct
         description_repr = repr(tool.description).strip("'")
         args_str = "\n".join([f"- {arg_name}: {arg_data['description']}" for arg_name, arg_data in tool.args.items()])
         self.status = f"{description_repr}\nArguments:\n{args_str}"
-        return tool
+        return tool  # type: ignore
diff --git a/src/backend/base/langflow/components/experimental/SubFlow.py b/src/backend/base/langflow/components/experimental/SubFlow.py
index 150461275b..af309fa883 100644
--- a/src/backend/base/langflow/components/experimental/SubFlow.py
+++ b/src/backend/base/langflow/components/experimental/SubFlow.py
@@ -1,10 +1,12 @@
-from typing import Any, List, Optional, Text, Tuple
+from typing import Any, List, Optional
 
+from langflow.helpers.flow import get_flow_inputs
 from loguru import logger
 
 from langflow.custom import CustomComponent
 from langflow.graph.graph.base import Graph
 from langflow.graph.schema import ResultData, RunOutputs
+from langflow.graph.vertex.base import Vertex
 from langflow.schema import Record
 from langflow.schema.dotdict import dotdict
 from langflow.template.field.base import TemplateField
@@ -20,7 +22,7 @@ def get_flow_names(self) -> List[str]:
         flow_records = self.list_flows()
         return [flow_record.data["name"] for flow_record in flow_records]
 
-    def get_flow(self, flow_name: str) -> Optional[Text]:
+    def get_flow(self, flow_name: str) -> Optional[Record]:
         flow_records = self.list_flows()
         for flow_record in flow_records:
             if flow_record.data["name"] == flow_name:
@@ -42,7 +44,7 @@ def update_build_config(self, build_config: dotdict, field_value: Any, field_nam
                     raise ValueError(f"Flow {field_value} not found.")
                 graph = Graph.from_payload(flow_record.data["data"])
                 # Get all inputs from the graph
-                inputs = self.get_flow_inputs(graph)
+                inputs = get_flow_inputs(graph)
                 # Add inputs to the build config
                 build_config = self.add_inputs_to_build_config(inputs, build_config)
             except Exception as e:
@@ -50,21 +52,13 @@ def update_build_config(self, build_config: dotdict, field_value: Any, field_nam
 
         return build_config
 
-    def get_flow_inputs(self, graph: Graph) -> List[Record]:
-        inputs = []
-        for vertex in graph.vertices:
-            if vertex.is_input:
-                inputs.append((vertex.id, vertex.display_name, vertex.description))
-        logger.debug(inputs)
-        return inputs
-
-    def add_inputs_to_build_config(self, inputs: List[Tuple], build_config: dotdict):
+    def add_inputs_to_build_config(self, inputs: List[Vertex], build_config: dotdict):
         new_fields: list[TemplateField] = []
-        for input_id, input_display_name, input_description in inputs:
+        for vertex in inputs:
             field = TemplateField(
-                display_name=input_display_name,
-                name=input_id,
-                info=input_description,
+                display_name=vertex.display_name,
+                name=vertex.id,
+                info=vertex.description,
                 field_type="str",
                 default=None,
             )
@@ -110,12 +104,15 @@ async def build(self, flow_name: str, **kwargs) -> List[Record]:
             tweaks=tweaks,
             flow_name=flow_name,
         )
+        if not run_outputs:
+            return []
         run_output = run_outputs[0]
 
         records = []
-        for output in run_output.outputs:
-            if output:
-                records.extend(self.build_records_from_result_data(output))
+        if run_output is not None:
+            for output in run_output.outputs:
+                if output:
+                    records.extend(self.build_records_from_result_data(output))
 
         self.status = records
         logger.debug(records)
diff --git a/src/backend/base/langflow/components/models/AzureOpenAIModel.py b/src/backend/base/langflow/components/models/AzureOpenAIModel.py
index eeb488f039..58cc3f2c26 100644
--- a/src/backend/base/langflow/components/models/AzureOpenAIModel.py
+++ b/src/backend/base/langflow/components/models/AzureOpenAIModel.py
@@ -2,7 +2,6 @@
 
 from langchain.llms.base import BaseLanguageModel
 from langchain_openai import AzureChatOpenAI
-from pydantic.v1 import SecretStr
 
 from langflow.base.models.model import LCModelComponent
 from langflow.field_typing import Text
@@ -91,21 +90,20 @@ def build(
         azure_endpoint: str,
         input_value: Text,
         azure_deployment: str,
-        api_key: str,
         api_version: str,
+        api_key: Optional[str] = None,
         system_message: Optional[str] = None,
         temperature: float = 0.7,
         max_tokens: Optional[int] = 1000,
         stream: bool = False,
     ) -> BaseLanguageModel:
-        secret_api_key = SecretStr(api_key)
         try:
             output = AzureChatOpenAI(
                 model=model,
                 azure_endpoint=azure_endpoint,
                 azure_deployment=azure_deployment,
                 api_version=api_version,
-                api_key=secret_api_key,
+                api_key=api_key,
                 temperature=temperature,
                 max_tokens=max_tokens,
             )
diff --git a/src/backend/base/langflow/components/models/base/__init__.py b/src/backend/base/langflow/components/models/base/__init__.py
deleted file mode 100644
index 921f10336a..0000000000
--- a/src/backend/base/langflow/components/models/base/__init__.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from .model import LCModelComponent
-
-__all__ = ["LCModelComponent"]
diff --git a/src/backend/base/langflow/components/tools/SearchAPITool.py b/src/backend/base/langflow/components/tools/SearchAPITool.py
index 6ec2f693ca..e0658c8c8d 100644
--- a/src/backend/base/langflow/components/tools/SearchAPITool.py
+++ b/src/backend/base/langflow/components/tools/SearchAPITool.py
@@ -34,4 +34,4 @@ def build(
         tool = SearchAPIRun(api_wrapper=search_api_wrapper)
 
         self.status = tool
-        return tool
+        return tool  # type: ignore
diff --git a/src/backend/base/langflow/components/vectorstores/AstraDB.py b/src/backend/base/langflow/components/vectorstores/AstraDB.py
index 9ab73808e3..28f5ec22e9 100644
--- a/src/backend/base/langflow/components/vectorstores/AstraDB.py
+++ b/src/backend/base/langflow/components/vectorstores/AstraDB.py
@@ -1,6 +1,7 @@
 from typing import List, Optional
 
 from langchain_astradb import AstraDBVectorStore
+from langchain_astradb.utils.astradb import SetupMode
 
 from langflow.custom import CustomComponent
 from langflow.field_typing import Embeddings, VectorStore
@@ -83,6 +84,10 @@ def build(
         metadata_indexing_exclude: Optional[List[str]] = None,
         collection_indexing_policy: Optional[dict] = None,
     ) -> VectorStore:
+        try:
+            setup_mode_value = SetupMode[setup_mode.upper()]
+        except KeyError:
+            raise ValueError(f"Invalid setup mode: {setup_mode}")
         if inputs:
             documents = [_input.to_lc_document() for _input in inputs]
 
@@ -98,7 +103,7 @@ def build(
                 bulk_insert_batch_concurrency=bulk_insert_batch_concurrency,
                 bulk_insert_overwrite_concurrency=bulk_insert_overwrite_concurrency,
                 bulk_delete_concurrency=bulk_delete_concurrency,
-                setup_mode=setup_mode,
+                setup_mode=setup_mode_value,
                 pre_delete_collection=pre_delete_collection,
                 metadata_indexing_include=metadata_indexing_include,
                 metadata_indexing_exclude=metadata_indexing_exclude,
@@ -116,7 +121,7 @@ def build(
                 bulk_insert_batch_concurrency=bulk_insert_batch_concurrency,
                 bulk_insert_overwrite_concurrency=bulk_insert_overwrite_concurrency,
                 bulk_delete_concurrency=bulk_delete_concurrency,
-                setup_mode=setup_mode,
+                setup_mode=setup_mode_value,
                 pre_delete_collection=pre_delete_collection,
                 metadata_indexing_include=metadata_indexing_include,
                 metadata_indexing_exclude=metadata_indexing_exclude,
diff --git a/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py b/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
index 8432f01f15..3343d91f64 100644
--- a/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
+++ b/src/backend/base/langflow/components/vectorstores/AstraDBSearch.py
@@ -6,7 +6,7 @@
 from langflow.schema import Record
 
 
-class AstraDBSearchComponent(AstraDBVectorStoreComponent, LCVectorStoreComponent):
+class AstraDBSearchComponent(LCVectorStoreComponent):
     display_name = "AstraDB Search"
     description = "Searches an existing AstraDB Vector Store"
 
@@ -74,7 +74,7 @@ def build(
         self,
         embedding: Embeddings,
         collection_name: str,
-        input_value: Optional[Text] = None,
+        input_value: Text,
         search_type: str = "Similarity",
         token: Optional[str] = None,
         api_endpoint: Optional[str] = None,
@@ -90,7 +90,7 @@ def build(
         metadata_indexing_exclude: Optional[List[str]] = None,
         collection_indexing_policy: Optional[dict] = None,
     ) -> List[Record]:
-        vector_store = super().build(
+        vector_store = AstraDBVectorStoreComponent().build(
             embedding=embedding,
             collection_name=collection_name,
             token=token,
diff --git a/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py b/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
index 10b69ce153..cbb583fb36 100644
--- a/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
+++ b/src/backend/base/langflow/components/vectorstores/MongoDBAtlasVectorSearch.py
@@ -6,7 +6,7 @@
 from langflow.schema import Record
 
 
-class MongoDBAtlasSearchComponent(MongoDBAtlasComponent, LCVectorStoreComponent):
+class MongoDBAtlasSearchComponent(LCVectorStoreComponent):
     display_name = "MongoDB Atlas Search"
     description = "Search a MongoDB Atlas Vector Store for similar documents."
 
@@ -37,9 +37,10 @@ def build(  # type: ignore[override]
         search_kwargs: Optional[NestedDict] = None,
     ) -> List[Record]:
         search_kwargs = search_kwargs or {}
-        vector_store = super().build(
-            connection_string=mongodb_atlas_cluster_uri,
-            namespace=f"{db_name}.{collection_name}",
+        vector_store = MongoDBAtlasComponent().build(
+            mongodb_atlas_cluster_uri=mongodb_atlas_cluster_uri,
+            collection_name=collection_name,
+            db_name=db_name,
             embedding=embedding,
             index_name=index_name,
         )
diff --git a/src/backend/base/langflow/graph/graph/base.py b/src/backend/base/langflow/graph/graph/base.py
index 174ec9ce45..00bb69f674 100644
--- a/src/backend/base/langflow/graph/graph/base.py
+++ b/src/backend/base/langflow/graph/graph/base.py
@@ -1,7 +1,7 @@
 import asyncio
 from collections import defaultdict, deque
 from itertools import chain
-from typing import TYPE_CHECKING, Coroutine, Dict, Generator, List, Optional, Type, Union
+from typing import TYPE_CHECKING, Callable, Coroutine, Dict, Generator, List, Literal, Optional, Type, Union
 
 from loguru import logger
 
@@ -201,7 +201,7 @@ async def _run(
         self,
         inputs: Dict[str, str],
         input_components: list[str],
-        input_type: str,
+        input_type: Literal["chat", "text", "json", "any"] | None,
         outputs: list[str],
         stream: bool,
         session_id: str,
@@ -236,7 +236,7 @@ async def _run(
                     continue
                 # If the input_type is not any and the input_type is not in the vertex id
                 # Example: input_type = "chat" and vertex.id = "OpenAI-19ddn"
-                elif input_type != "any" and input_type not in vertex.id.lower():
+                elif input_type is not None and input_type != "any" and input_type not in vertex.id.lower():
                     continue
                 if vertex is None:
                     raise ValueError(f"Vertex {vertex_id} not found")
@@ -269,9 +269,9 @@ async def _run(
 
     def run(
         self,
-        inputs: Dict[str, str],
-        input_components: Optional[list[str]] = None,
-        types: Optional[list[str]] = None,
+        inputs: list[Dict[str, str]],
+        input_components: Optional[list[list[str]]] = None,
+        types: Optional[list[Literal["chat", "text", "json", "any"] | None]] = None,
         outputs: Optional[list[str]] = None,
         session_id: Optional[str] = None,
         stream: bool = False,
@@ -309,7 +309,7 @@ async def arun(
         self,
         inputs: list[Dict[str, str]],
         inputs_components: Optional[list[list[str]]] = None,
-        types: Optional[list[str]] = None,
+        types: Optional[list[Literal["chat", "text", "json", "any"] | None]] = None,
         outputs: Optional[list[str]] = None,
         session_id: Optional[str] = None,
         stream: bool = False,
@@ -338,8 +338,12 @@ async def arun(
             inputs = [{}]
         # Length of all should be the as inputs length
         # just add empty lists to complete the length
+        if inputs_components is None:
+            inputs_components = []
         for _ in range(len(inputs) - len(inputs_components)):
             inputs_components.append([])
+        if types is None:
+            types = []
         for _ in range(len(inputs) - len(types)):
             types.append("any")
         for run_inputs, components, input_type in zip(inputs, inputs_components, types):
@@ -650,7 +654,7 @@ def get_vertex(self, vertex_id: str) -> Vertex:
     async def build_vertex(
         self,
         lock: asyncio.Lock,
-        set_cache_coro: Coroutine,
+        set_cache_coro: Callable[["Graph", asyncio.Lock], Coroutine],
         vertex_id: str,
         inputs_dict: Optional[Dict[str, str]] = None,
         user_id: Optional[str] = None,
@@ -693,7 +697,9 @@ async def build_vertex(
             logger.exception(f"Error building vertex: {exc}")
             raise exc
 
-    async def get_next_and_top_level_vertices(self, lock: asyncio.Lock, set_cache_coro: Coroutine, vertex: Vertex):
+    async def get_next_and_top_level_vertices(
+        self, lock: asyncio.Lock, set_cache_coro: Callable[["Graph", asyncio.Lock], Coroutine], vertex: Vertex
+    ):
         """
         Retrieves the next runnable vertices and the top level vertices for a given vertex.
 
diff --git a/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py b/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
index 3fa9d3e913..d31f01fe75 100644
--- a/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
+++ b/src/backend/base/langflow/graph/graph/runnable_vertices_manager.py
@@ -1,6 +1,6 @@
 import asyncio
 from collections import defaultdict
-from typing import TYPE_CHECKING, Coroutine, List
+from typing import TYPE_CHECKING, Awaitable, Callable, List
 
 if TYPE_CHECKING:
     from langflow.graph.graph.base import Graph
@@ -55,7 +55,7 @@ def update_vertex_run_state(self, vertex_id: str, is_runnable: bool):
     async def get_next_runnable_vertices(
         self,
         lock: asyncio.Lock,
-        set_cache_coro: Coroutine,
+        set_cache_coro: Callable[["Graph", asyncio.Lock], Awaitable[None]],
         graph: "Graph",
         vertex: "Vertex",
     ):
@@ -85,7 +85,7 @@ async def get_next_runnable_vertices(
             for v_id in set(next_runnable_vertices):  # Use set to avoid duplicates
                 self.update_vertex_run_state(v_id, is_runnable=False)
                 self.remove_from_predecessors(v_id)
-            await set_cache_coro(data=graph, lock=lock)
+            await set_cache_coro(graph, lock)
         return next_runnable_vertices
 
     @staticmethod
diff --git a/src/backend/base/langflow/alembic/helpers/__init__.py b/src/backend/base/langflow/helpers/__init__.py
similarity index 100%
rename from src/backend/base/langflow/alembic/helpers/__init__.py
rename to src/backend/base/langflow/helpers/__init__.py
diff --git a/src/backend/base/langflow/helpers/__init__py b/src/backend/base/langflow/helpers/__init__py
deleted file mode 100644
index b944a01788..0000000000
--- a/src/backend/base/langflow/helpers/__init__py
+++ /dev/null
@@ -1,3 +0,0 @@
-from .record import docs_to_records, records_to_text
-
-__all__ = ["docs_to_records", "records_to_text"]
\ No newline at end of file
diff --git a/src/backend/base/langflow/helpers/flow.py b/src/backend/base/langflow/helpers/flow.py
index 328e99ca16..88c51efa30 100644
--- a/src/backend/base/langflow/helpers/flow.py
+++ b/src/backend/base/langflow/helpers/flow.py
@@ -1,4 +1,4 @@
-from typing import TYPE_CHECKING, Any, Callable, Coroutine, List, Optional, Tuple, Union
+from typing import TYPE_CHECKING, Any, Awaitable, Callable, List, Optional, Tuple, Type, Union, cast
 
 from pydantic.v1 import BaseModel, Field, create_model
 from sqlmodel import select
@@ -63,28 +63,30 @@ def find_flow(flow_name: str, user_id: str) -> Optional[str]:
 
 
 async def run_flow(
-    inputs: Union[dict, List[dict]] = None,
+    inputs: Optional[Union[dict, List[dict]]] = None,
     tweaks: Optional[dict] = None,
     flow_id: Optional[str] = None,
     flow_name: Optional[str] = None,
     user_id: Optional[str] = None,
 ) -> Any:
+    if not user_id:
+        raise ValueError("Session is invalid")
     graph = await load_flow(user_id, flow_id, flow_name, tweaks)
 
     if inputs is None:
         inputs = []
-    inputs_list = []
+    inputs_list: list[dict[str, str]] = []
     inputs_components = []
     types = []
     for input_dict in inputs:
-        inputs_list.append({INPUT_FIELD_NAME: input_dict.get("input_value")})
+        inputs_list.append({INPUT_FIELD_NAME: cast(str, input_dict.get("input_value", ""))})
         inputs_components.append(input_dict.get("components", []))
         types.append(input_dict.get("type", []))
 
     return await graph.arun(inputs_list, inputs_components=inputs_components, types=types)
 
 
-def generate_function_for_flow(inputs: List["Vertex"], flow_id: str) -> Coroutine:
+def generate_function_for_flow(inputs: List["Vertex"], flow_id: str) -> Callable[..., Awaitable[Any]]:
     """
     Generate a dynamic flow function based on the given inputs and flow ID.
 
@@ -138,12 +140,14 @@ async def flow_function({func_args}):
 """
 
     compiled_func = compile(func_body, "<string>", "exec")
-    local_scope = {}
+    local_scope: dict = {}
     exec(compiled_func, globals(), local_scope)
     return local_scope["flow_function"]
 
 
-def build_function_and_schema(flow_record: Record, graph: "Graph") -> Tuple[Callable, BaseModel]:
+def build_function_and_schema(
+    flow_record: Record, graph: "Graph"
+) -> Tuple[Callable[..., Awaitable[Any]], Type[BaseModel]]:
     """
     Builds a dynamic function and schema for a given flow.
 
@@ -178,7 +182,7 @@ def get_flow_inputs(graph: "Graph") -> List["Vertex"]:
     return inputs
 
 
-def build_schema_from_inputs(name: str, inputs: List[tuple[str, str, str]]) -> BaseModel:
+def build_schema_from_inputs(name: str, inputs: List["Vertex"]) -> Type[BaseModel]:
     """
     Builds a schema from the given inputs.
 
@@ -196,4 +200,4 @@ def build_schema_from_inputs(name: str, inputs: List[tuple[str, str, str]]) -> B
         field_name = input_.display_name.lower().replace(" ", "_")
         description = input_.description
         fields[field_name] = (str, Field(default="", description=description))
-    return create_model(name, **fields)
+    return create_model(name, **fields)  # type: ignore
diff --git a/src/backend/base/langflow/interface/custom/custom_component/custom_component.py b/src/backend/base/langflow/interface/custom/custom_component/custom_component.py
index 1554a57daf..4276d4616e 100644
--- a/src/backend/base/langflow/interface/custom/custom_component/custom_component.py
+++ b/src/backend/base/langflow/interface/custom/custom_component/custom_component.py
@@ -423,11 +423,13 @@ def get_function(self):
         return validate.create_function(self.code, self.function_entrypoint_name)
 
     async def load_flow(self, flow_id: str, tweaks: Optional[dict] = None) -> "Graph":
-        return await load_flow(flow_id, tweaks)
+        if not self._user_id:
+            raise ValueError("Session is invalid")
+        return await load_flow(user_id=self._user_id, flow_id=flow_id, tweaks=tweaks)
 
     async def run_flow(
         self,
-        inputs: Union[dict, List[dict]] = None,
+        inputs: Optional[Union[dict, List[dict]]] = None,
         flow_id: Optional[str] = None,
         flow_name: Optional[str] = None,
         tweaks: Optional[dict] = None,
diff --git a/src/backend/base/langflow/interface/initialize/loading.py b/src/backend/base/langflow/interface/initialize/loading.py
index 0ba40b90e3..55940622c2 100644
--- a/src/backend/base/langflow/interface/initialize/loading.py
+++ b/src/backend/base/langflow/interface/initialize/loading.py
@@ -38,7 +38,7 @@ async def instantiate_class(
     user_id=None,
 ) -> Any:
     """Instantiate class from module type and key, and params"""
-    from langflow.legacy_custom.customs import CUSTOM_NODES
+    from langflow.interface.custom_lists import CUSTOM_NODES
 
     vertex_type = vertex.vertex_type
     base_type = vertex.base_type
@@ -50,7 +50,9 @@ async def instantiate_class(
         if custom_node := CUSTOM_NODES.get(vertex_type):
             if hasattr(custom_node, "initialize"):
                 return custom_node.initialize(**params)
-            return custom_node(**params)
+            if callable(custom_node):
+                return custom_node(**params)
+            raise ValueError(f"Custom node {vertex_type} is not callable")
     logger.debug(f"Instantiating {vertex_type} of type {base_type}")
     if not base_type:
         raise ValueError("No base type provided for vertex")
diff --git a/src/backend/base/langflow/interface/tools/base.py b/src/backend/base/langflow/interface/tools/base.py
index 2506c01706..ddaccb4bbd 100644
--- a/src/backend/base/langflow/interface/tools/base.py
+++ b/src/backend/base/langflow/interface/tools/base.py
@@ -5,8 +5,6 @@
 from langflow.interface.tools.constants import ALL_TOOLS_NAMES, CUSTOM_TOOLS, FILE_TOOLS, OTHER_TOOLS
 from langflow.interface.tools.util import get_tool_params
 from langflow.legacy_custom import customs
-from langflow.interface.tools.util import get_tool_params
-from langflow.legacy_custom import customs
 from langflow.services.deps import get_settings_service
 from langflow.template.field.base import TemplateField
 from langflow.template.template.base import Template
diff --git a/src/backend/base/langflow/legacy_custom/customs.py b/src/backend/base/langflow/legacy_custom/customs.py
index 82e87f1e55..ff69064ffd 100644
--- a/src/backend/base/langflow/legacy_custom/customs.py
+++ b/src/backend/base/langflow/legacy_custom/customs.py
@@ -1,7 +1,7 @@
 from langflow.template import frontend_node
 
 # These should always be instantiated
-CUSTOM_NODES = {
+CUSTOM_NODES: dict[str, dict[str, frontend_node.base.FrontendNode]] = {
     # "prompts": {
     #     "ZeroShotPrompt": frontend_node.prompts.ZeroShotPromptNode(),
     # },
diff --git a/src/backend/base/langflow/processing/process.py b/src/backend/base/langflow/processing/process.py
index fa499472fa..c7e496dd77 100644
--- a/src/backend/base/langflow/processing/process.py
+++ b/src/backend/base/langflow/processing/process.py
@@ -125,7 +125,7 @@ class Result(BaseModel):
 
 
 async def run_graph(
-    graph: Union["Graph", dict],
+    graph: "Graph",
     flow_id: str,
     stream: bool,
     session_id: Optional[str] = None,
diff --git a/src/backend/base/langflow/services/factory.py b/src/backend/base/langflow/services/factory.py
index 4780b53c78..49bea7db24 100644
--- a/src/backend/base/langflow/services/factory.py
+++ b/src/backend/base/langflow/services/factory.py
@@ -23,7 +23,7 @@ def create(self, *args, **kwargs) -> "Service":
         raise self.service_class(*args, **kwargs)
 
 
-def hash_factory(factory: ServiceFactory) -> str:
+def hash_factory(factory: Type[ServiceFactory]) -> str:
     return factory.service_class.__name__
 
 
@@ -38,7 +38,7 @@ def hash_infer_service_types_args(factory_class: Type[ServiceFactory], available
 
 
 @cached(cache=LRUCache(maxsize=10), key=hash_infer_service_types_args)
-def infer_service_types(factory_class: Type[ServiceFactory], available_services=None) -> "ServiceType":
+def infer_service_types(factory_class: Type[ServiceFactory], available_services=None) -> list["ServiceType"]:
     create_method = factory_class.create
     type_hints = get_type_hints(create_method, globalns=available_services)
     service_types = []
diff --git a/src/backend/base/langflow/services/settings/auth.py b/src/backend/base/langflow/services/settings/auth.py
index 3dd92a04ab..a5bd7ed804 100644
--- a/src/backend/base/langflow/services/settings/auth.py
+++ b/src/backend/base/langflow/services/settings/auth.py
@@ -1,5 +1,6 @@
 import secrets
 from pathlib import Path
+from typing import Literal
 
 from loguru import logger
 from passlib.context import CryptContext
@@ -14,7 +15,7 @@ class AuthSettings(BaseSettings):
     # Login settings
     CONFIG_DIR: str
     SECRET_KEY: SecretStr = Field(
-        default=None,
+        default=SecretStr(""),
         description="Secret key for JWT. If not provided, a random one will be generated.",
         frozen=False,
     )
@@ -33,13 +34,13 @@ class AuthSettings(BaseSettings):
     SUPERUSER: str = DEFAULT_SUPERUSER
     SUPERUSER_PASSWORD: str = DEFAULT_SUPERUSER_PASSWORD
 
-    REFRESH_SAME_SITE: str = "none"
+    REFRESH_SAME_SITE: Literal["lax", "strict", "none"] = "none"
     """The SameSite attribute of the refresh token cookie."""
     REFRESH_SECURE: bool = True
     """The Secure attribute of the refresh token cookie."""
     REFRESH_HTTPONLY: bool = True
     """The HttpOnly attribute of the refresh token cookie."""
-    ACCESS_SAME_SITE: str = "none"
+    ACCESS_SAME_SITE: Literal["lax", "strict", "none"] = "none"
     """The SameSite attribute of the access token cookie."""
     ACCESS_SECURE: bool = True
     """The Secure attribute of the access token cookie."""
@@ -85,9 +86,10 @@ def get_secret_key(cls, value, values):
 
         secret_key_path = Path(config_dir) / "secret_key"
 
-        if value:
+        if value and isinstance(value, SecretStr):
             logger.debug("Secret key provided")
-            write_secret_to_file(secret_key_path, value)
+            secret_value = value.get_secret_value()
+            write_secret_to_file(secret_key_path, secret_value)
         else:
             logger.debug("No secret key provided, generating a random one")
 
@@ -103,4 +105,4 @@ def get_secret_key(cls, value, values):
                 write_secret_to_file(secret_key_path, value)
                 logger.debug("Saved secret key")
 
-        return value
+        return value if isinstance(value, SecretStr) else SecretStr(value)
diff --git a/src/backend/base/langflow/template/frontend_node/__init__.py b/src/backend/base/langflow/template/frontend_node/__init__.py
index 00c2766962..ceb2e0cb9b 100644
--- a/src/backend/base/langflow/template/frontend_node/__init__.py
+++ b/src/backend/base/langflow/template/frontend_node/__init__.py
@@ -10,10 +10,12 @@
     textsplitters,
     tools,
     vectorstores,
+    base,
 )
 
 __all__ = [
     "agents",
+    "base",
     "chains",
     "embeddings",
     "memories",
diff --git a/src/backend/base/pyproject.toml b/src/backend/base/pyproject.toml
index d32780505c..df6daa0dcf 100644
--- a/src/backend/base/pyproject.toml
+++ b/src/backend/base/pyproject.toml
@@ -17,7 +17,7 @@ repository = "https://github.com/logspace-ai/langflow"
 license = "MIT"
 readme = "README.md"
 keywords = ["nlp", "langchain", "openai", "gpt", "gui"]
-packages = [{ include = "langflow" }, { include = "py.typed" }]
+packages = [{ include = "langflow" }, { include = "langflow/py.typed" }]
 include = ["pyproject.toml", "README.md", "langflow/**/*"]
 documentation = "https://docs.langflow.org"
 
diff --git a/src/backend/langflow/base/agents/__init__.py b/src/backend/langflow/base/agents/__init__.py
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/backend/langflow/base/agents/agent.py b/src/backend/langflow/base/agents/agent.py
deleted file mode 100644
index 8dac73e61c..0000000000
--- a/src/backend/langflow/base/agents/agent.py
+++ /dev/null
@@ -1,70 +0,0 @@
-from typing import List, Union
-
-from langchain.agents import AgentExecutor, BaseMultiActionAgent, BaseSingleActionAgent
-
-from langflow import CustomComponent
-from langflow.field_typing import BaseMemory, Text, Tool
-
-
-class LCAgentComponent(CustomComponent):
-    def build_config(self):
-        return {
-            "lc": {
-                "display_name": "LangChain",
-                "info": "The LangChain to interact with.",
-            },
-            "handle_parsing_errors": {
-                "display_name": "Handle Parsing Errors",
-                "info": "If True, the agent will handle parsing errors. If False, the agent will raise an error.",
-                "advanced": True,
-            },
-            "output_key": {
-                "display_name": "Output Key",
-                "info": "The key to use to get the output from the agent.",
-                "advanced": True,
-            },
-            "memory": {
-                "display_name": "Memory",
-                "info": "Memory to use for the agent.",
-            },
-            "tools": {
-                "display_name": "Tools",
-                "info": "Tools the agent can use.",
-            },
-            "input_value": {
-                "display_name": "Input",
-                "info": "Input text to pass to the agent.",
-            },
-        }
-
-    async def run_agent(
-        self,
-        agent: Union[BaseSingleActionAgent, BaseMultiActionAgent, AgentExecutor],
-        inputs: str,
-        input_variables: list[str],
-        tools: List[Tool],
-        memory: BaseMemory = None,
-        handle_parsing_errors: bool = True,
-        output_key: str = "output",
-    ) -> Text:
-        if isinstance(agent, AgentExecutor):
-            runnable = agent
-        else:
-            runnable = AgentExecutor.from_agent_and_tools(
-                agent=agent, tools=tools, verbose=True, memory=memory, handle_parsing_errors=handle_parsing_errors
-            )
-        input_dict = {"input": inputs}
-        for var in input_variables:
-            if var not in ["agent_scratchpad", "input"]:
-                input_dict[var] = ""
-        result = await runnable.ainvoke(input_dict)
-        self.status = result
-        if output_key in result:
-            return result.get(output_key)
-        elif "output" not in result:
-            if output_key != "output":
-                raise ValueError(f"Output key not found in result. Tried '{output_key}' and 'output'.")
-            else:
-                raise ValueError("Output key not found in result. Tried 'output'.")
-
-        return result.get("output")
diff --git a/src/backend/langflow/base/models/__init__.py b/src/backend/langflow/base/models/__init__.py
deleted file mode 100644
index 921f10336a..0000000000
--- a/src/backend/langflow/base/models/__init__.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from .model import LCModelComponent
-
-__all__ = ["LCModelComponent"]
diff --git a/src/backend/langflow/base/models/model.py b/src/backend/langflow/base/models/model.py
deleted file mode 100644
index e2ab4b6cf8..0000000000
--- a/src/backend/langflow/base/models/model.py
+++ /dev/null
@@ -1,48 +0,0 @@
-from typing import Optional
-
-from langchain_core.language_models.chat_models import BaseChatModel
-from langchain_core.language_models.llms import LLM
-from langchain_core.messages import HumanMessage, SystemMessage
-
-from langflow import CustomComponent
-
-
-class LCModelComponent(CustomComponent):
-    display_name: str = "Model Name"
-    description: str = "Model Description"
-
-    def get_result(self, runnable: LLM, stream: bool, input_value: str):
-        """
-        Retrieves the result from the output of a Runnable object.
-
-        Args:
-            output (Runnable): The output object to retrieve the result from.
-            stream (bool): Indicates whether to use streaming or invocation mode.
-            input_value (str): The input value to pass to the output object.
-
-        Returns:
-            The result obtained from the output object.
-        """
-        if stream:
-            result = runnable.stream(input_value)
-        else:
-            message = runnable.invoke(input_value)
-            result = message.content if hasattr(message, "content") else message
-            self.status = result
-        return result
-
-    def get_chat_result(
-        self, runnable: BaseChatModel, stream: bool, input_value: str, system_message: Optional[str] = None
-    ):
-        messages = []
-        if input_value:
-            messages.append(HumanMessage(input_value))
-        if system_message:
-            messages.append(SystemMessage(system_message))
-        if stream:
-            result = runnable.stream(messages)
-        else:
-            message = runnable.invoke(messages)
-            result = message.content
-            self.status = result
-        return result
diff --git a/src/backend/langflow/components/experimental/FlowTool.py b/src/backend/langflow/components/experimental/FlowTool.py
deleted file mode 100644
index 5f504ff027..0000000000
--- a/src/backend/langflow/components/experimental/FlowTool.py
+++ /dev/null
@@ -1,85 +0,0 @@
-from typing import Any, List, Optional, Text
-
-from langchain_core.tools import StructuredTool
-from loguru import logger
-
-from langflow import CustomComponent
-from langflow.field_typing import Tool
-from langflow.graph.graph.base import Graph
-from langflow.helpers.flow import build_function_and_schema
-from langflow.schema.dotdict import dotdict
-
-
-class FlowToolComponent(CustomComponent):
-    display_name = "Flow as Tool"
-    description = "Construct a Tool from a function that runs the loaded Flow."
-    field_order = ["flow_name", "name", "description", "return_direct"]
-
-    def get_flow_names(self) -> List[str]:
-        flow_records = self.list_flows()
-        return [flow_record.data["name"] for flow_record in flow_records]
-
-    def get_flow(self, flow_name: str) -> Optional[Text]:
-        """
-        Retrieves a flow by its name.
-
-        Args:
-            flow_name (str): The name of the flow to retrieve.
-
-        Returns:
-            Optional[Text]: The flow record if found, None otherwise.
-        """
-        flow_records = self.list_flows()
-        for flow_record in flow_records:
-            if flow_record.data["name"] == flow_name:
-                return flow_record
-        return None
-
-    def update_build_config(self, build_config: dotdict, field_value: Any, field_name: str | None = None):
-        logger.debug(f"Updating build config with field value {field_value} and field name {field_name}")
-        if field_name == "flow_name":
-            build_config["flow_name"]["options"] = self.get_flow_names()
-
-        return build_config
-
-    def build_config(self):
-        return {
-            "flow_name": {
-                "display_name": "Flow Name",
-                "info": "The name of the flow to run.",
-                "options": [],
-                "real_time_refresh": True,
-                "refresh_button": True,
-            },
-            "name": {
-                "display_name": "Name",
-                "description": "The name of the tool.",
-            },
-            "description": {
-                "display_name": "Description",
-                "description": "The description of the tool.",
-            },
-            "return_direct": {
-                "display_name": "Return Direct",
-                "description": "Return the result directly from the Tool.",
-                "advanced": True,
-            },
-        }
-
-    async def build(self, flow_name: str, name: str, description: str, return_direct: bool = False) -> Tool:
-        flow_record = self.get_flow(flow_name)
-        if not flow_record:
-            raise ValueError("Flow not found.")
-        graph = Graph.from_payload(flow_record.data["data"])
-        dynamic_flow_function, schema = build_function_and_schema(flow_record, graph)
-        tool = StructuredTool.from_function(
-            coroutine=dynamic_flow_function,
-            name=name,
-            description=description,
-            return_direct=return_direct,
-            args_schema=schema,
-        )
-        description_repr = repr(tool.description).strip("'")
-        args_str = "\n".join([f"- {arg_name}: {arg_data['description']}" for arg_name, arg_data in tool.args.items()])
-        self.status = f"{description_repr}\nArguments:\n{args_str}"
-        return tool
diff --git a/src/backend/langflow/components/experimental/Schema.py b/src/backend/langflow/components/experimental/Schema.py
deleted file mode 100644
index 72cbec23e2..0000000000
--- a/src/backend/langflow/components/experimental/Schema.py
+++ /dev/null
@@ -1,25 +0,0 @@
-from langflow.custom import CustomComponent
-
-
-class SchemaComponent(CustomComponent):
-    display_name = "Schema"
-    description = "Construct a Schema from a list of fields."
-
-    def build_config(self):
-        return {
-            "fields": {
-                "display_name": "Fields",
-                "info": "The fields to include in the schema.",
-            },
-            "name": {
-                "display_name": "Name",
-                "info": "The name of the schema.",
-            },
-        }
-
-    def build(self, name: str, fields: list[dict]):
-        # The idea for this component is to use create_model from pydantic to create a schema
-        # from a list of fields. This will be useful for creating schemas for the flow tool.
-        pass
-
-        # field is a simple list of dictionaries with the field name and
diff --git a/src/backend/langflow/components/tools/SearchAPITool.py b/src/backend/langflow/components/tools/SearchAPITool.py
deleted file mode 100644
index 76c82ad9c5..0000000000
--- a/src/backend/langflow/components/tools/SearchAPITool.py
+++ /dev/null
@@ -1,37 +0,0 @@
-from langchain_community.tools.searchapi import SearchAPIRun
-from langchain_community.utilities.searchapi import SearchApiAPIWrapper
-
-from langflow import CustomComponent
-from langflow.field_typing import Tool
-
-
-class SearchApiToolComponent(CustomComponent):
-    display_name: str = "SearchApi Tool"
-    description: str = "Real-time search engine results API."
-    documentation: str = "https://www.searchapi.io/docs/google"
-    field_config = {
-        "engine": {
-            "display_name": "Engine",
-            "field_type": "str",
-            "info": "The search engine to use.",
-        },
-        "api_key": {
-            "display_name": "API Key",
-            "field_type": "str",
-            "required": True,
-            "password": True,
-            "info": "The API key to use SearchApi.",
-        },
-    }
-
-    def build(
-        self,
-        engine: str,
-        api_key: str,
-    ) -> Tool:
-        search_api_wrapper = SearchApiAPIWrapper(engine=engine, searchapi_api_key=api_key)
-
-        tool = SearchAPIRun(api_wrapper=search_api_wrapper)
-
-        self.status = tool
-        return tool
diff --git a/src/backend/langflow/version/__init__.py b/src/backend/langflow/version/__init__.py
new file mode 100644
index 0000000000..5c0cf285cb
--- /dev/null
+++ b/src/backend/langflow/version/__init__.py
@@ -0,0 +1 @@
+from .version import __version__  # noqa: F401
diff --git a/src/backend/base/langflow/version.py b/src/backend/langflow/version/version.py
similarity index 53%
rename from src/backend/base/langflow/version.py
rename to src/backend/langflow/version/version.py
index c8bb365cac..3aaf5f9737 100644
--- a/src/backend/base/langflow/version.py
+++ b/src/backend/langflow/version/version.py
@@ -3,6 +3,5 @@
 try:
     __version__ = metadata.version(__package__)
 except metadata.PackageNotFoundError:
-    # Case where package metadata is not available.
     __version__ = ""
-del metadata  # optional, avoids polluting the results of dir(__package__)
+del metadata

From fc432f29ce69cadd71655530a449e81bf817453a Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 26 Mar 2024 23:24:37 -0300
Subject: [PATCH 83/83] Update poetry version to 1.8.2 in Dockerfiles

---
 base.Dockerfile           | 2 +-
 build_and_push.Dockerfile | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/base.Dockerfile b/base.Dockerfile
index 2293c35dd0..936943cd13 100644
--- a/base.Dockerfile
+++ b/base.Dockerfile
@@ -23,7 +23,7 @@ ENV PYTHONUNBUFFERED=1 \
     \
     # poetry
     # https://python-poetry.org/docs/configuration/#using-environment-variables
-    POETRY_VERSION=1.7.1 \
+    POETRY_VERSION=1.8.2 \
     # make poetry install to this location
     POETRY_HOME="/opt/poetry" \
     # make poetry create the virtual environment in the project's root
diff --git a/build_and_push.Dockerfile b/build_and_push.Dockerfile
index f296d83aab..3cce7804b6 100644
--- a/build_and_push.Dockerfile
+++ b/build_and_push.Dockerfile
@@ -23,7 +23,7 @@ ENV PYTHONUNBUFFERED=1 \
     \
     # poetry
     # https://python-poetry.org/docs/configuration/#using-environment-variables
-    POETRY_VERSION=1.7.1 \
+    POETRY_VERSION=1.8.2 \
     # make poetry install to this location
     POETRY_HOME="/opt/poetry" \
     # make poetry create the virtual environment in the project's root