Release (#615)

.devcontainer/demo/README.md

@@ -1,6 +1,6 @@
-# LangFlow Demo Codespace Readme
+# Langflow Demo Codespace Readme
 
-These instructions will walk you through the process of running a LangFlow demo via GitHub Codespaces.
+These instructions will walk you through the process of running a Langflow demo via GitHub Codespaces.
 
 ## Setup
 

CONTRIBUTING.md

@@ -1,6 +1,6 @@
-# Contributing to LangFlow
+# Contributing to Langflow
 
-Hello there! We appreciate your interest in contributing to LangFlow.
+Hello there! We appreciate your interest in contributing to Langflow.
 As an open-source project in a rapidly developing field, we are extremely open
 to contributions, whether it be in the form of a new feature, improved infra, or better documentation.
 
@@ -40,7 +40,7 @@ the system we use to tag our issues and pull requests.
 
 
 ### Local development
-You can develop LangFlow using docker compose, or locally.
+You can develop Langflow using docker compose, or locally.
 
 We provide a .vscode/launch.json file for debugging the backend in VSCode, which is a lot faster than using docker compose.
 

README.md

@@ -1,6 +1,6 @@
 <!-- Title -->
 
-# ⛓️ LangFlow
+# ⛓️ Langflow
 
 ~ An effortless way to experiment and prototype [LangChain](https://github.com/hwchase17/langchain) pipelines ~
 
@@ -16,7 +16,7 @@
 
 <p>
 <a href="https://discord.gg/EqksyE2EX9"><img alt="Discord Server" src="https://dcbadge.vercel.app/api/server/EqksyE2EX9?compact=true&style=flat"/></a>
-<a href="https://huggingface.co/spaces/Logspace/LangFlow"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg" alt="HuggingFace Spaces"></a>
+<a href="https://huggingface.co/spaces/Logspace/Langflow"><img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-in-hf-spaces-sm.svg" alt="HuggingFace Spaces"></a>
 </p>
 
 <a href="https://github.com/logspace-ai/langflow">
@@ -43,7 +43,7 @@
 
 # 📦 Installation
 ### <b>Locally</b>
-You can install LangFlow from pip:
+You can install Langflow from pip:
 
 ```shell
 pip install langflow
@@ -220,7 +220,7 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))
 
 ## 🎨 Creating Flows
 
-Creating flows with LangFlow is easy. Simply drag sidebar components onto the canvas and connect them together to create your pipeline. LangFlow provides a range of [LangChain components](https://langchain.readthedocs.io/en/latest/reference.html) to choose from, including LLMs, prompt serializers, agents, and chains.
+Creating flows with Langflow is easy. Simply drag sidebar components onto the canvas and connect them together to create your pipeline. Langflow provides a range of [LangChain components](https://langchain.readthedocs.io/en/latest/reference.html) to choose from, including LLMs, prompt serializers, agents, and chains.
 
 Explore by editing prompt parameters, link chains and agents, track an agent's thought process, and export your flow.
 
@@ -233,13 +233,13 @@ from langflow import load_flow_from_json
 
 flow = load_flow_from_json("path/to/flow.json")
 # Now you can use it like any chain
-flow("Hey, have you heard of LangFlow?")
+flow("Hey, have you heard of Langflow?")
 ```
 
 
 ## 👋 Contributing
 
-We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make LangFlow more accessible.
+We welcome contributions from developers of all levels to our open-source project on GitHub. If you'd like to contribute, please check our [contributing guidelines](./CONTRIBUTING.md) and help make Langflow more accessible.
 
 
 Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask questions, make suggestions and showcase your projects! 🦾
@@ -252,4 +252,4 @@ Join our [Discord](https://discord.com/invite/EqksyE2EX9) server to ask question
 
 ## 📄 License
 
-LangFlow is released under the MIT License. See the LICENSE file for details.
+Langflow is released under the MIT License. See the LICENSE file for details.

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "0.2.12"
+version = "0.2.13"
 description = "A Python package with a built-in web application"
 authors = ["Logspace <contact@logspace.ai>"]
 maintainers = [

src/backend/langflow/__main__.py

@@ -48,6 +48,26 @@ def update_settings(
         settings.update_settings(cache=cache)
 
 
+def load_params():
+    """
+    Load the parameters from the environment variables.
+    """
+    global_vars = globals()
+
+    for key, value in global_vars.items():
+        env_key = f"LANGFLOW_{key.upper()}"
+        if env_key in os.environ:
+            if isinstance(value, bool):
+                # Handle booleans
+                global_vars[key] = os.getenv(env_key, str(value)).lower() == "true"
+            elif isinstance(value, int):
+                # Handle integers
+                global_vars[key] = int(os.getenv(env_key, str(value)))
+            elif isinstance(value, str) or value is None:
+                # Handle strings and None values
+                global_vars[key] = os.getenv(env_key, str(value))
+
+
 def serve_on_jcloud():
     """
     Deploy Langflow server on Jina AI Cloud
@@ -149,6 +169,7 @@ def serve(
     # override env variables with .env file
     if env_file:
         load_dotenv(env_file, override=True)
+        load_params()
 
     if jcloud:
         return serve_on_jcloud()
@@ -244,7 +265,7 @@ def get_free_port(port):
 def print_banner(host, port):
     # console = Console()
 
-    word = "LangFlow"
+    word = "Langflow"
     colors = ["#3300cc"]
 
     styled_word = ""

src/backend/langflow/api/v1/schemas.py

@@ -23,7 +23,7 @@ class GraphData(BaseModel):
 
 
 class ExportedFlow(BaseModel):
-    """Exported flow from LangFlow."""
+    """Exported flow from Langflow."""
 
     description: str
     name: str

src/frontend/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="/favicon.ico" />
-    <title>LangFlow</title>
+    <title>Langflow</title>
 </head>
 <body id='body' style="width: 100%; height:100%">
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/frontend/src/App.tsx

@@ -118,7 +118,7 @@ export default function App() {
 
   const removeAlert = (id: string) => {
     setAlertsList((prevAlertsList) =>
-      prevAlertsList.filter((alert) => alert.id !== id)
+      prevAlertsList.filter((alert) => alert.id !== id),
     );
   };
 

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -59,7 +59,7 @@ export default function ParameterComponent({
   }, [data.id, position, updateNodeInternals]);
 
   const [enabled, setEnabled] = useState(
-    data.node.template[name]?.value ?? false
+    data.node.template[name]?.value ?? false,
   );
 
   useEffect(() => {}, [closePopUp, data.node.template]);
@@ -101,7 +101,7 @@ export default function ParameterComponent({
       <span
         key={getRandomKeyByssmm()}
         className={classNames(
-          i > 0 ? "items-center flex mt-3" : "items-center flex"
+          i > 0 ? "items-center flex mt-3" : "items-center flex",
         )}
       >
         <div
@@ -183,7 +183,7 @@ export default function ParameterComponent({
               }
               className={classNames(
                 left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
+                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",
               )}
               style={{
                 borderColor: color,

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -82,7 +82,7 @@ export default function GenericNode({
       <div
         className={classNames(
           selected ? "border border-ring" : "border dark:border-gray-700",
-          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
+          "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900",
         )}
       >
         <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
@@ -132,7 +132,7 @@ export default function GenericNode({
                       validationStatus && validationStatus.valid
                         ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
                     )}
                   ></div>
                   <div
@@ -140,7 +140,7 @@ export default function GenericNode({
                       validationStatus && !validationStatus.valid
                         ? "w-4 h-4 rounded-full  bg-red-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
                     )}
                   ></div>
                   <div
@@ -148,7 +148,7 @@ export default function GenericNode({
                       !validationStatus || isBuilding
                         ? "w-4 h-4 rounded-full  bg-yellow-500 opacity-100"
                         : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                      "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200",
                     )}
                   ></div>
                 </div>
@@ -217,7 +217,7 @@ export default function GenericNode({
             <div
               className={classNames(
                 Object.keys(data.node.template).length < 1 ? "hidden" : "",
-                "flex w-full justify-center"
+                "flex w-full justify-center",
               )}
             >
               {" "}

src/frontend/src/components/AccordionComponent/index.tsx

@@ -18,7 +18,7 @@ export default function AccordionComponent({
   open = [],
 }: AccordionComponentType) {
   const [value, setValue] = useState(
-    open.length == 0 ? "" : getOpenAccordion()
+    open.length == 0 ? "" : getOpenAccordion(),
   );
 
   function getOpenAccordion() {

src/frontend/src/components/ExtraSidebarComponent/index.tsx

@@ -34,7 +34,7 @@ export default function ExtraSidebar() {
                             item.href.split("/")[2] === current[4]
                               ? "bg-muted text-gray-900"
                               : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                            "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
+                            "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md",
                           )}
                         >
                           <item.icon
@@ -42,7 +42,7 @@ export default function ExtraSidebar() {
                               item.href.split("/")[2] === current[4]
                                 ? "text-gray-500"
                                 : "text-gray-400 group-hover:text-gray-500",
-                              "mr-3 flex-shrink-0 h-6 w-6"
+                              "mr-3 flex-shrink-0 h-6 w-6",
                             )}
                           />
                           {item.name}
@@ -61,7 +61,7 @@ export default function ExtraSidebar() {
                                 item.href.split("/")[2] === current[4]
                                   ? "bg-muted text-gray-900"
                                   : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500",
                               )}
                             >
                               <item.icon
@@ -74,7 +74,7 @@ export default function ExtraSidebar() {
                                   open
                                     ? "text-gray-400 rotate-90"
                                     : "text-gray-300",
-                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400"
+                                  "ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-gray-400",
                                 )}
                                 viewBox="0 0 20 20"
                                 aria-hidden="true"
@@ -94,7 +94,7 @@ export default function ExtraSidebar() {
                                     subItem.href.split("/")[3] === current[5]
                                       ? "bg-muted text-gray-900"
                                       : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
+                                    "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium",
                                   )}
                                 >
                                   {subItem.name}
@@ -104,7 +104,7 @@ export default function ExtraSidebar() {
                           </>
                         )}
                       </Disclosure>
-                    )
+                    ),
                   )}
                 </nav>
               </div>

src/frontend/src/components/ReactTooltipComponent/index.tsx

@@ -38,7 +38,7 @@ const TooltipReact: FC<TooltipProps> = ({
         content={content}
         className={classNames(
           "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
-          className
+          className,
         )}
         place={position}
         clickable={clickable}

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -126,7 +126,7 @@ export default function BuildTrigger({
 
   async function enforceMinimumLoadingTime(
     startTime: number,
-    minimumLoadingTime: number
+    minimumLoadingTime: number,
   ) {
     const elapsedTime = Date.now() - startTime;
     const remainingTime = minimumLoadingTime - elapsedTime;

src/frontend/src/components/chatComponent/index.tsx

@@ -45,7 +45,7 @@ export default function Chat({ flow }: ChatType) {
   useEffect(() => {
     const prevNodes = prevNodesRef.current;
     const currentNodes = nodes.map(
-      (node: NodeType) => node.data.node.template.value
+      (node: NodeType) => node.data.node.template.value,
     );
 
     if (

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -13,7 +13,7 @@ export default function CodeAreaComponent({
   editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(
-    typeof value == "string" ? value : JSON.stringify(value)
+    typeof value == "string" ? value : JSON.stringify(value),
   );
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
@@ -43,7 +43,7 @@ export default function CodeAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
           className={
@@ -67,7 +67,7 @@ export default function CodeAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
         >

src/frontend/src/components/dropdownComponent/index.tsx

@@ -18,7 +18,7 @@ export default function Dropdown({
   const { closePopUp } = useContext(PopUpContext);
 
   let [internalValue, setInternalValue] = useState(
-    value === "" || !value ? "Choose an option" : value
+    value === "" || !value ? "Choose an option" : value,
   );
 
   useEffect(() => {
@@ -71,7 +71,7 @@ export default function Dropdown({
                     editNode
                       ? "z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
                       : "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
-                    apiModal ? "w-[250px] mb-2" : "absolute"
+                    apiModal ? "w-[250px] mb-2" : "absolute",
                   )}
                 >
                   {options.map((option, id) => (
@@ -84,7 +84,7 @@ export default function Dropdown({
                             : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
-                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
+                            : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800",
                         )
                       }
                       value={option}
@@ -94,7 +94,7 @@ export default function Dropdown({
                           <span
                             className={classNames(
                               selected ? "font-semibold" : "font-normal",
-                              "block truncate "
+                              "block truncate ",
                             )}
                           >
                             {option}
@@ -104,7 +104,7 @@ export default function Dropdown({
                             <span
                               className={classNames(
                                 active ? "text-white dark:text-black" : "",
-                                "absolute inset-y-0 right-0 flex items-center pr-4"
+                                "absolute inset-y-0 right-0 flex items-center pr-4",
                               )}
                             >
                               <Check

src/frontend/src/components/headerComponent/index.tsx

@@ -128,7 +128,7 @@ export default function Header() {
                     <AlertDropdown />
                   </div>
                   <div className="h-screen w-screen fixed top-0 left-0"></div>
-                </>
+                </>,
               );
             }}
           >

src/frontend/src/components/inputComponent/index.tsx

@@ -53,7 +53,7 @@ export default function InputComponent({
             ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
                 INPUT_STYLE
             : "ring-offset-gray-200" + INPUT_STYLE,
-          password && editNode ? "pr-8" : "pr-3"
+          password && editNode ? "pr-8" : "pr-3",
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
         onChange={(e) => {
@@ -66,7 +66,7 @@ export default function InputComponent({
           className={classNames(
             editNode
               ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
-              : "absolute inset-y-0 right-0 items-center px-4 text-gray-600"
+              : "absolute inset-y-0 right-0 items-center px-4 text-gray-600",
           )}
           onClick={() => {
             setPwdVisible(!pwdVisible);
@@ -83,7 +83,7 @@ export default function InputComponent({
                 className={classNames(
                   editNode
                     ? "w-5 h-5 absolute bottom-0.5 right-2"
-                    : "w-5 h-5 absolute bottom-2 right-3"
+                    : "w-5 h-5 absolute bottom-2 right-3",
                 )}
               >
                 <path
@@ -102,7 +102,7 @@ export default function InputComponent({
                 className={classNames(
                   editNode
                     ? "w-5 h-5 absolute bottom-0.5 right-2"
-                    : "w-5 h-5 absolute bottom-2 right-3"
+                    : "w-5 h-5 absolute bottom-2 right-3",
                 )}
               >
                 <path

src/frontend/src/components/promptComponent/index.tsx

@@ -44,7 +44,7 @@ export default function PromptAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
           className={
@@ -70,7 +70,7 @@ export default function PromptAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
         >

src/frontend/src/components/textAreaComponent/index.tsx

@@ -47,7 +47,7 @@ export default function TextAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
           className={
@@ -73,7 +73,7 @@ export default function TextAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />
+              />,
             );
           }}
         >

src/frontend/src/components/toggleComponent/index.tsx

@@ -22,7 +22,7 @@ export default function ToggleComponent({
         }}
         className={classNames(
           enabled ? "bg-primary" : "bg-gray-200",
-          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1"
+          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1",
         )}
       >
         <span className="sr-only">Use setting</span>
@@ -32,7 +32,7 @@ export default function ToggleComponent({
             "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out",
             disabled
               ? "bg-gray-200 dark:bg-gray-600"
-              : "bg-white dark:bg-gray-800"
+              : "bg-white dark:bg-gray-800",
           )}
         >
           <span
@@ -40,7 +40,7 @@ export default function ToggleComponent({
               enabled
                 ? "opacity-0 ease-out duration-100"
                 : "opacity-100 ease-in duration-200",
-              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
             )}
             aria-hidden="true"
           ></span>
@@ -49,7 +49,7 @@ export default function ToggleComponent({
               enabled
                 ? "opacity-100 ease-in duration-200"
                 : "opacity-0 ease-out duration-100",
-              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
+              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
             )}
             aria-hidden="true"
           ></span>

src/frontend/src/components/ui/accordion.tsx

@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >
@@ -47,7 +47,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
+      className,
     )}
     {...props}
   >

src/frontend/src/components/ui/badge.tsx

@@ -19,7 +19,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface BadgeProps

src/frontend/src/components/ui/button.tsx

@@ -30,7 +30,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -49,7 +49,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

src/frontend/src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-lg flex flex-col justify-between border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all",
-      className
+      className,
     )}
     {...props}
   />
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-base font-semibold leading-tight tracking-tight",
-      className
+      className,
     )}
     {...props}
   />

src/frontend/src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
     ref={ref}
     className={cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      className,
     )}
     {...props}
   >

src/frontend/src/components/ui/dialog.tsx

@@ -28,7 +28,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-primary/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      className
+      className,
     )}
     {...props}
   />
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -66,7 +66,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -80,7 +80,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -95,7 +95,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />

src/frontend/src/components/ui/dropdown-menu.tsx

@@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in 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
+        className,
       )}
       {...props}
     />
@@ -84,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -148,7 +148,7 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 pl-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />

src/frontend/src/components/ui/input.tsx

@@ -11,13 +11,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Input.displayName = "Input";
 

src/frontend/src/components/ui/label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<

src/frontend/src/components/ui/menubar.tsx

@@ -24,7 +24,7 @@ const Menubar = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -39,7 +39,7 @@ const MenubarTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -57,7 +57,7 @@ const MenubarSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -75,7 +75,7 @@ const MenubarSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -88,7 +88,7 @@ const MenubarContent = React.forwardRef<
 >(
   (
     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
+    ref,
   ) => (
     <MenubarPrimitive.Portal>
       <MenubarPrimitive.Content
@@ -98,12 +98,12 @@ const MenubarContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
           "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in slide-in-from-top-1",
-          className
+          className,
         )}
         {...props}
       />
     </MenubarPrimitive.Portal>
-  )
+  ),
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
@@ -118,7 +118,7 @@ const MenubarItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -133,7 +133,7 @@ const MenubarCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -156,7 +156,7 @@ const MenubarRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -181,7 +181,7 @@ const MenubarLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -208,7 +208,7 @@ const MenubarShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />

src/frontend/src/components/ui/progress.tsx

@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
     ref={ref}
     className={cn(
       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
+      className,
     )}
     {...props}
   >

src/frontend/src/components/ui/rename-label.tsx

@@ -58,7 +58,7 @@ export default function RenameLabel(props) {
           onInput={resizeInput}
           className={cn(
             "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md",
-            props.className
+            props.className,
           )}
           onBlur={() => {
             setIsRename(false);

src/frontend/src/components/ui/separator.tsx

@@ -10,7 +10,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -19,11 +19,11 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 

src/frontend/src/components/ui/switch.tsx

@@ -11,14 +11,14 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>

src/frontend/src/components/ui/table.tsx

@@ -55,7 +55,7 @@ const TableRow = React.forwardRef<
     ref={ref}
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      className,
     )}
     {...props}
   />
@@ -70,7 +70,7 @@ const TableHead = React.forwardRef<
     ref={ref}
     className={cn(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
+      className,
     )}
     {...props}
   />

src/frontend/src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted",
-      className
+      className,
     )}
     {...props}
   />
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />

src/frontend/src/components/ui/textarea.tsx

@@ -10,13 +10,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Textarea.displayName = "Textarea";
 

src/frontend/src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
+      className,
     )}
     {...props}
   />

src/frontend/src/constants.tsx

@@ -134,7 +134,7 @@ TWEAKS = ${
   }
 flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 # Now you can use it like any chain
-flow("Hey, have you heard of LangFlow?")`;
+flow("Hey, have you heard of Langflow?")`;
 };
 
 function buildTweakObject(tweak) {

src/frontend/src/contexts/alertContext.tsx

@@ -132,7 +132,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
   function removeFromNotificationList(index: string) {
     // set the notification list to a new array that filters out the alert with the matching id
     setNotificationList((prevAlertsList) =>
-      prevAlertsList.filter((alert) => alert.id !== index)
+      prevAlertsList.filter((alert) => alert.id !== index),
     );
   }
   return (

src/frontend/src/contexts/darkContext.tsx

@@ -14,7 +14,7 @@ export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
   const [dark, setDark] = useState(
-    JSON.parse(window.localStorage.getItem("isDark")) ?? false
+    JSON.parse(window.localStorage.getItem("isDark")) ?? false,
   );
   useEffect(() => {
     if (dark) {

src/frontend/src/contexts/locationContext.tsx

@@ -53,7 +53,7 @@ export const locationContext = createContext<locationContextType>(initialValue);
 export function LocationProvider({ children }: { children: ReactNode }) {
   const [current, setCurrent] = useState(initialValue.current);
   const [isStackedOpen, setIsStackedOpen] = useState(
-    initialValue.isStackedOpen
+    initialValue.isStackedOpen,
   );
   const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
   const [extraNavigation, setExtraNavigation] = useState({ title: "" });

src/frontend/src/contexts/tabsContext.tsx

@@ -57,12 +57,12 @@ const TabsContextInitialValue: TabsContextType = {
   getTweak: {},
   paste: (
     selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number }
+    position: { x: number; y: number; paneX?: number; paneY?: number },
   ) => {},
 };
 
 export const TabsContext = createContext<TabsContextType>(
-  TabsContextInitialValue
+  TabsContextInitialValue,
 );
 
 export function TabsProvider({ children }: { children: ReactNode }) {
@@ -104,14 +104,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       });
       window.localStorage.setItem(
         "tabsData",
-        JSON.stringify({ tabId, flows: Saveflows, id })
+        JSON.stringify({ tabId, flows: Saveflows, id }),
       );
     }
   }
 
   // function loadCookie(cookie: string) {
   //   if (cookie && Object.keys(templates).length > 0) {
-  //     let cookieObject: LangFlowState = JSON.parse(cookie);
+  //     let cookieObject: LangflowState = JSON.parse(cookie);
   //     try {
   //       cookieObject.flows.forEach((flow) => {
   //         if (!flow.data) {
@@ -236,7 +236,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function updateNodeEdges(
     flow: FlowType,
     node: NodeType,
-    template: APIClassType
+    template: APIClassType,
   ) {
     flow.data.edges.forEach((edge) => {
       if (edge.source === node.id) {
@@ -256,7 +256,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function updateNodeTemplate(node: NodeType, template: APIClassType) {
     node.data.node.template = updateTemplate(
       template["template"] as unknown as APITemplateType,
-      node.data.node.template as APITemplateType
+      node.data.node.template as APITemplateType,
     );
   }
 
@@ -278,7 +278,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function downloadFlow(flow: FlowType) {
     // create a data URI with the current flow data
     const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(flow)
+      JSON.stringify(flow),
     )}`;
 
     // create a link element and set its properties
@@ -296,7 +296,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function downloadFlows() {
     downloadFlowsFromDatabase().then((flows) => {
       const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-        JSON.stringify(flows)
+        JSON.stringify(flows),
       )}`;
 
       // create a link element and set its properties
@@ -383,7 +383,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   function paste(
     selectionInstance,
-    position: { x: number; y: number; paneX?: number; paneY?: number }
+    position: { x: number; y: number; paneX?: number; paneY?: number },
   ) {
     let minimumX = Infinity;
     let minimumY = Infinity;
@@ -464,7 +464,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           animated: targetHandle.split("|")[0] === "Text",
           selected: false,
         },
-        edges.map((e) => ({ ...e, selected: false }))
+        edges.map((e) => ({ ...e, selected: false })),
       );
     });
     reactFlowInstance.setEdges(edges);
@@ -472,7 +472,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   const addFlow = async (
     flow?: FlowType,
-    newProject?: Boolean
+    newProject?: Boolean,
   ): Promise<String> => {
     if (newProject) {
       let flowData = extractDataFromFlow(flow);
@@ -503,7 +503,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     } else {
       paste(
         { nodes: flow.data.nodes, edges: flow.data.edges },
-        { x: 10, y: 10 }
+        { x: 10, y: 10 },
       );
     }
   };
@@ -553,7 +553,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         node.data.node.description = template["description"];
         node.data.node.template = updateTemplate(
           template["template"] as unknown as APITemplateType,
-          node.data.node.template as APITemplateType
+          node.data.node.template as APITemplateType,
         );
       }
     });

src/frontend/src/contexts/typesContext.tsx

@@ -47,7 +47,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
                 acc[c] = result.data[curr][c];
               });
               return acc;
-            }, {})
+            }, {}),
           );
           // Set the types by reducing over the keys of the result data and updating the accumulator.
           setTypes(
@@ -62,10 +62,10 @@ export function TypesProvider({ children }: { children: ReactNode }) {
                     result.data[curr][c].base_classes?.forEach((b) => {
                       acc[b] = curr;
                     });
-                  }
+                  },
                 );
                 return acc;
-              }, {})
+              }, {}),
           );
         }
         // Clear the interval if successful.
@@ -99,12 +99,12 @@ export function TypesProvider({ children }: { children: ReactNode }) {
 
   function deleteNode(idx: string) {
     reactFlowInstance.setNodes(
-      reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx)
+      reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx),
     );
     reactFlowInstance.setEdges(
       reactFlowInstance
         .getEdges()
-        .filter((ns) => ns.source !== idx && ns.target !== idx)
+        .filter((ns) => ns.source !== idx && ns.target !== idx),
     );
   }
   return (

src/frontend/src/contexts/undoRedoContext.tsx

@@ -52,7 +52,7 @@ export function UndoRedoProvider({ children }) {
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
   const [tabIndex, setTabIndex] = useState(
-    flows.findIndex((f) => f.id === tabId)
+    flows.findIndex((f) => f.id === tabId),
   );
 
   useEffect(() => {
@@ -70,7 +70,7 @@ export function UndoRedoProvider({ children }) {
       let newPast = cloneDeep(old);
       newPast[tabIndex] = old[tabIndex].slice(
         old[tabIndex].length - defaultOptions.maxHistorySize + 1,
-        old[tabIndex].length
+        old[tabIndex].length,
       );
       newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
       return newPast;

src/frontend/src/controllers/API/index.ts

@@ -24,7 +24,7 @@ const GITHUB_API_URL = "https://api.github.com";
 export async function getRepoStars(owner, repo) {
   try {
     const response = await axios.get(
-      `${GITHUB_API_URL}/repos/${owner}/${repo}`
+      `${GITHUB_API_URL}/repos/${owner}/${repo}`,
     );
     return response.data.stargazers_count;
   } catch (error) {
@@ -44,7 +44,7 @@ export async function sendAll(data: sendAllProps) {
 }
 
 export async function postValidateCode(
-  code: string
+  code: string,
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   return await axios.post("/api/v1/validate/code", { code });
 }
@@ -56,7 +56,7 @@ export async function postValidateCode(
  * @returns {Promise<AxiosResponse<PromptTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
  */
 export async function checkPrompt(
-  template: string
+  template: string,
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   return await axios.post("/api/v1/validate/prompt", { template });
 }
@@ -120,7 +120,7 @@ export async function saveFlowToDatabase(newFlow: {
  * @throws Will throw an error if the update fails.
  */
 export async function updateFlowInDatabase(
-  updatedFlow: FlowType
+  updatedFlow: FlowType,
 ): Promise<FlowType> {
   try {
     const response = await axios.patch(`/api/v1/flows/${updatedFlow.id}`, {
@@ -296,7 +296,7 @@ export async function getHealth() {
  *
  */
 export async function getBuildStatus(
-  flowId: string
+  flowId: string,
 ): Promise<BuildStatusTypeAPI> {
   return await axios.get(`/api/v1/build/${flowId}/status`);
 }
@@ -309,7 +309,7 @@ export async function getBuildStatus(
  *
  */
 export async function postBuildInit(
-  flow: FlowType
+  flow: FlowType,
 ): Promise<AxiosResponse<InitTypeAPI>> {
   return await axios.post(`/api/v1/build/init/${flow.id}`, flow);
 }
@@ -325,7 +325,7 @@ export async function postBuildInit(
  */
 export async function uploadFile(
   file: File,
-  id: string
+  id: string,
 ): Promise<AxiosResponse<UploadFileTypeAPI>> {
   const formData = new FormData();
   formData.append("file", file);

src/frontend/src/flow_constants.tsx

@@ -20,7 +20,7 @@ export const DESCRIPTIONS: string[] = [
   "Generate, Innovate, Communicate.",
   "Conversation Catalyst Engine.",
   "Language Chainlink Master.",
-  "Design Dialogues with LangFlow.",
+  "Design Dialogues with Langflow.",
   "Nurture NLP Nodes Here.",
   "Conversational Cartography Unlocked.",
   "Design, Develop, Dialogize.",
@@ -31,7 +31,7 @@ export const DESCRIPTIONS: string[] = [
   "Where Language Meets Logic.",
   "Building Intelligent Interactions.",
   "Your Passport to Linguistic Landscapes.",
-  "Create, Curate, Communicate with LangFlow.",
+  "Create, Curate, Communicate with Langflow.",
   "Flow into the Future of Language.",
   "Mapping Meaningful Conversations.",
   "Unravel the Art of Articulation.",
@@ -41,7 +41,7 @@ export const DESCRIPTIONS: string[] = [
   "The Pinnacle of Prompt Generation.",
   "Language Models, Mapped and Mastered.",
   "Powerful Prompts, Perfectly Positioned.",
-  "Innovation in Interaction with LangFlow.",
+  "Innovation in Interaction with Langflow.",
   "Your Toolkit for Text Generation.",
   "Unfolding Linguistic Possibilities.",
   "Building Powerful Solutions with Language Models.",

src/frontend/src/icons/AzLogo/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as AzSVG } from "./az_logo.svg";
 export const AzIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <AzSVG ref={ref} {...props} />;
-  }
+  },
 );

src/frontend/src/icons/Bing/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as BingSVG } from "./bing.svg";
 export const BingIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <BingSVG ref={ref} {...props} />;
-  }
+  },
 );

src/frontend/src/icons/FacebookMessenger/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as FacebookMessengerSVG } from "./Facebook_Messenger_log
 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <FacebookMessengerSVG ref={ref} {...props} />;
-  }
+  },
 );

src/frontend/src/icons/IFixIt/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as IFixItSVG } from "./ifixit-seeklogo.com.svg";
 export const IFixIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <IFixItSVG ref={ref} {...props} />;
-  }
+  },
 );

src/frontend/src/icons/Meta/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as MetaSVG } from "./meta-icon.svg";
 export const MetaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <MetaSVG ref={ref} {...props} />;
-  }
+  },
 );

src/frontend/src/icons/Searx/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as SearxSVG } from "./Searx_logo.svg";
 export const SearxIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <SearxSVG ref={ref} {...props} />;
-  }
+  },
 );

src/frontend/src/icons/Slack/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as SlackSVG } from "./slack-icon.svg";
 export const SlackIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <SlackSVG ref={ref} {...props} />;
-  }
+  },
 );

src/frontend/src/icons/Word/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as WordSVG } from "./word.svg";
 export const WordIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <WordSVG ref={ref} {...props} />;
-  }
+  },
 );

src/frontend/src/index.tsx

@@ -8,13 +8,13 @@ import ContextWrapper from "./contexts";
 import "./index.css";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 root.render(
   <ContextWrapper>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </ContextWrapper>
+  </ContextWrapper>,
 );
 reportWebVitals();

src/frontend/src/modals/ApiModal/index.tsx

@@ -156,7 +156,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
               t.data.node.template[n].type === "code" ||
               t.data.node.template[n].type === "prompt" ||
               t.data.node.template[n].type === "file" ||
-              t.data.node.template[n].type === "int")
+              t.data.node.template[n].type === "int"),
         )
         .map((n, i) => {
           arrNodesWithValues.push(t["id"]);
@@ -180,7 +180,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     }
 
     const existingTweak = tweak.current.find((element) =>
-      element.hasOwnProperty(tw)
+      element.hasOwnProperty(tw),
     );
 
     if (existingTweak) {
@@ -327,7 +327,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                         "w-full rounded-lg  bg-muted border-[1px] border-gray-200",
                         1 == 1
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
-                          : "overflow-hidden"
+                          : "overflow-hidden",
                       )}
                     >
                       {flow["data"]["nodes"].map((t: any, index) => (
@@ -368,7 +368,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                             t.data.node.template[n].type ===
                                               "file" ||
                                             t.data.node.template[n].type ===
-                                              "int")
+                                              "int"),
                                       )
                                       .map((n, i) => {
                                         //console.log(t.data.node.template[n]);
@@ -411,7 +411,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n]
+                                                              .template[n],
                                                           );
                                                         }}
                                                       />
@@ -422,7 +422,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         content={buildContent(
                                                           t.data.node.template[
                                                             n
-                                                          ].value
+                                                          ].value,
                                                         )}
                                                       >
                                                         <div>
@@ -435,14 +435,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                                 .value,
                                                               t.data,
                                                               t.data.node
-                                                                .template[n]
+                                                                .template[n],
                                                             )}
                                                             onChange={(k) => {
                                                               buildTweakObject(
                                                                 t["data"]["id"],
                                                                 k,
                                                                 t.data.node
-                                                                  .template[n]
+                                                                  .template[n],
                                                               );
                                                             }}
                                                           />
@@ -464,14 +464,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n]
+                                                              .template[n],
                                                           );
                                                         }}
                                                       />
@@ -496,7 +496,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           e,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         );
                                                       }}
                                                       size="small"
@@ -512,8 +512,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
-                                                      )
+                                                        t.data.node.template[n],
+                                                      ),
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -526,7 +526,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           ].value ?? ""
                                                         }
                                                         onChange={(
-                                                          k: any
+                                                          k: any,
                                                         ) => {}}
                                                         fileTypes={
                                                           t.data.node.template[
@@ -539,7 +539,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           ].suffixes
                                                         }
                                                         onFileChange={(
-                                                          k: any
+                                                          k: any,
                                                         ) => {}}
                                                       ></InputFileComponent>
                                                     </div>
@@ -554,7 +554,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
+                                                        t.data.node.template[n],
                                                       )}
                                                       onChange={(k) => {
                                                         buildTweakObject(
@@ -562,7 +562,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         );
                                                       }}
                                                     />
@@ -585,14 +585,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         );
                                                       }}
                                                       value={getValue(
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
+                                                        t.data.node.template[n],
                                                       )}
                                                     ></Dropdown>
                                                   </div>
@@ -606,7 +606,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
+                                                        t.data.node.template[n],
                                                       )}
                                                       onChange={(k) => {
                                                         buildTweakObject(
@@ -614,7 +614,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         );
                                                       }}
                                                     />
@@ -628,8 +628,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
-                                                      )
+                                                        t.data.node.template[n],
+                                                      ),
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -643,14 +643,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n]
+                                                              .template[n],
                                                           );
                                                         }}
                                                       />
@@ -665,8 +665,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n]
-                                                      )
+                                                        t.data.node.template[n],
+                                                      ),
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -680,14 +680,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ]
+                                                          ],
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n]
+                                                              .template[n],
                                                           );
                                                         }}
                                                       />

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -47,8 +47,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           data.node.template[t].type === "code" ||
           data.node.template[t].type === "prompt" ||
           data.node.template[t].type === "file" ||
-          data.node.template[t].type === "int")
-    ).length
+          data.node.template[t].type === "int"),
+    ).length,
   );
   const [nodeValue, setNodeValue] = useState(null);
   const { closePopUp } = useContext(PopUpContext);
@@ -104,7 +104,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               "w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
-                : "overflow-hidden"
+                : "overflow-hidden",
             )}
           >
             {nodeLength > 0 && (
@@ -131,7 +131,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             data.node.template[t].type === "code" ||
                             data.node.template[t].type === "prompt" ||
                             data.node.template[t].type === "file" ||
-                            data.node.template[t].type === "int")
+                            data.node.template[t].type === "int"),
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10 dark:border-b-muted">

src/frontend/src/modals/NodeModal/components/ModalField/index.tsx

@@ -22,7 +22,7 @@ export default function ModalField({
   index,
 }) {
   const [enabled, setEnabled] = useState(
-    data.node.template[name]?.value ?? false
+    data.node.template[name]?.value ?? false,
   );
   const display =
     type === "str" ||
@@ -42,12 +42,12 @@ export default function ModalField({
           (t) =>
             t.charAt(0) !== "_" &&
             data.node.template[t].advanced &&
-            data.node.template[t].show
+            data.node.template[t].show,
         ).length -
           1 ===
           index
           ? "pb-4"
-          : ""
+          : "",
       )}
     >
       {display && (

src/frontend/src/modals/NodeModal/index.tsx

@@ -99,10 +99,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                             (t) =>
                               t.charAt(0) !== "_" &&
                               data.node.template[t].advanced &&
-                              data.node.template[t].show
+                              data.node.template[t].show,
                           ).length > limitScrollFieldsModal
                             ? "overflow-scroll overflow-x-hidden custom-scroll"
-                            : "overflow-hidden"
+                            : "overflow-hidden",
                         )}
                       >
                         <div className="flex flex-col h-full gap-5">
@@ -111,7 +111,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                               (t) =>
                                 t.charAt(0) !== "_" &&
                                 data.node.template[t].advanced &&
-                                data.node.template[t].show
+                                data.node.template[t].show,
                             )
                             .map((t: string, idx) => {
                               return (

src/frontend/src/modals/chatModal/chatInput/index.tsx

@@ -54,7 +54,7 @@ export default function ChatInput({
             ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
             : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
           "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" +
-            INPUT_STYLE
+            INPUT_STYLE,
         )}
         placeholder={"Send a message..."}
       />

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -34,12 +34,12 @@ export default function ChatMessage({
         "w-full py-2 pl-2 flex",
         chat.isSend
           ? "bg-background dark:bg-gray-900 "
-          : "bg-input  dark:bg-gray-800"
+          : "bg-input  dark:bg-gray-800",
       )}
     >
       <div
         className={classNames(
-          "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center"
+          "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center",
         )}
       >
         {!chat.isSend && (
@@ -105,7 +105,7 @@ export default function ChatMessage({
 
                           children[0] = (children[0] as string).replace(
                             "`▍`",
-                            "▍"
+                            "▍",
                           );
                         }
 

src/frontend/src/modals/chatModal/index.tsx

@@ -51,7 +51,7 @@ export default function ChatModal({
     message: string,
     isSend: boolean,
     thought?: string,
-    files?: Array<any>
+    files?: Array<any>,
   ) => {
     setChatHistory((old) => {
       let newChat = _.cloneDeep(old);
@@ -147,10 +147,10 @@ export default function ChatModal({
                       isSend: !chatItem.is_bot,
                       message: chatItem.message,
                       thought: chatItem.intermediate_steps,
-                    }
+                    },
               );
             }
-          }
+          },
         );
         return newChatHistory;
       });
@@ -189,7 +189,7 @@ export default function ChatModal({
     try {
       const urlWs = getWebSocketUrl(
         id.current,
-        process.env.NODE_ENV === "development"
+        process.env.NODE_ENV === "development",
       );
       const newWs = new WebSocket(urlWs);
       newWs.onopen = () => {
@@ -380,7 +380,7 @@ export default function ChatModal({
                       <span>
                         👋{" "}
                         <span className="text-gray-600 dark:text-gray-300 text-lg">
-                          LangFlow Chat
+                          Langflow Chat
                         </span>
                       </span>
                       <br />

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -117,7 +117,7 @@ export default function CodeAreaModal({
                   setErrorData({
                     title:
                       "There is something wrong with this code, please review it",
-                  })
+                  }),
                 );
             }}
             type="submit"

src/frontend/src/modals/exportModal/index.tsx

@@ -36,7 +36,7 @@ export default function ExportModal() {
   const [checked, setChecked] = useState(false);
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
   const [description, setDescription] = useState(
-    flows.find((f) => f.id === tabId).description
+    flows.find((f) => f.id === tabId).description,
   );
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -27,7 +27,7 @@ export default function FlowSettingsModal() {
   const maxLength = 50;
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
   const [description, setDescription] = useState(
-    flows.find((f) => f.id === tabId).description
+    flows.find((f) => f.id === tabId).description,
   );
   function setModalOpen(x: boolean) {
     setOpen(x);

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -81,7 +81,7 @@ export default function ButtonBox({
           bgColor,
           height,
           width,
-          padding
+          padding,
         )}
       >
         <div
@@ -98,7 +98,7 @@ export default function ButtonBox({
             className={classNames(
               "w-full font-semibold break-words text-white dark:text-white/80 truncate-multiline",
               titleFontSize,
-              marginTop
+              marginTop,
             )}
           >
             {title}

src/frontend/src/modals/importModal/index.tsx

@@ -1,22 +1,18 @@
 import {
-  XMarkIcon,
-  ArrowDownTrayIcon,
   DocumentDuplicateIcon,
   ComputerDesktopIcon,
   ArrowUpTrayIcon,
   ArrowLeftIcon,
-  CommandLineIcon,
 } from "@heroicons/react/24/outline";
-import { Fragment, useContext, useRef, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import ButtonBox from "./buttonBox";
 import { getExamples } from "../../controllers/API";
-import { error } from "console";
 import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
 import { FlowType } from "../../types/flow";
-import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
+import { classNames } from "../../utils";
 import {
   Dialog,
   DialogContent,
@@ -26,7 +22,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
 import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function ImportModal() {
@@ -58,7 +53,7 @@ export default function ImportModal() {
         setErrorData({
           title: "there was an error loading examples, please try again",
           list: [error.message],
-        })
+        }),
       );
   }
 
@@ -69,7 +64,7 @@ export default function ImportModal() {
         className={classNames(
           showExamples
             ? "lg:max-w-[650px] h-[600px]"
-            : "lg:max-w-[650px] h-[450px]"
+            : "lg:max-w-[650px] h-[450px]",
         )}
       >
         <DialogHeader>
@@ -109,7 +104,7 @@ export default function ImportModal() {
             "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
             showExamples && !loadingExamples
               ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
-              : "flex flex-row justify-center items-center"
+              : "flex flex-row justify-center items-center",
           )}
         >
           {!showExamples && (
@@ -194,7 +189,7 @@ export default function ImportModal() {
                   fill="currentColor"
                 />
               </svg>
-              <span className="ml-2 ">LangFlow Examples</span>
+              <span className="ml-2 ">Langflow Examples</span>
             </a>
           </div>
         </DialogFooter>

src/frontend/src/pages/CommunityPage/index.tsx

@@ -28,7 +28,7 @@ export default function CommunityPage() {
         setErrorData({
           title: "there was an error loading examples, please try again",
           list: [error.message],
-        })
+        }),
       );
   }
   const navigate = useNavigate();
@@ -57,7 +57,7 @@ export default function CommunityPage() {
         </div>
       </div>
       <span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
-        Discover and learn from shared examples by the LangFlow community. We
+        Discover and learn from shared examples by the Langflow community. We
         welcome new example contributions that can help our community explore
         new and powerful features.
       </span>

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -111,10 +111,10 @@ export default function Page({ flow }: { flow: FlowType }) {
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
   const { setErrorData } = useContext(alertContext);
   const [nodes, setNodes, onNodesChange] = useNodesState(
-    flow.data?.nodes ?? []
+    flow.data?.nodes ?? [],
   );
   const [edges, setEdges, onEdgesChange] = useEdgesState(
-    flow.data?.edges ?? []
+    flow.data?.edges ?? [],
   );
   const { setViewport } = useReactFlow();
   const edgeUpdateSuccessful = useRef(true);
@@ -156,7 +156,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         };
       });
     },
-    [onEdgesChange, setNodes, setTabsState, tabId]
+    [onEdgesChange, setNodes, setTabsState, tabId],
   );
 
   const onNodesChangeMod = useCallback(
@@ -171,7 +171,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         };
       });
     },
-    [onNodesChange, setTabsState, tabId]
+    [onNodesChange, setTabsState, tabId],
   );
 
   const onConnect = useCallback(
@@ -188,15 +188,15 @@ export default function Page({ flow }: { flow: FlowType }) {
                 : "stroke-gray-900 dark:stroke-gray-200",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
-          eds
-        )
+          eds,
+        ),
       );
       setNodes((x) => {
         let newX = _.cloneDeep(x);
         return newX;
       });
     },
-    [setEdges, setNodes, takeSnapshot]
+    [setEdges, setNodes, takeSnapshot],
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -230,7 +230,7 @@ export default function Page({ flow }: { flow: FlowType }) {
 
       // Extract the data from the drag event and parse it as a JSON object
       let data: { type: string; node?: APIClassType } = JSON.parse(
-        event.dataTransfer.getData("json")
+        event.dataTransfer.getData("json"),
       );
 
       // If data type is not "chatInput" or if there are no "chatInputNode" nodes present in the ReactFlow instance, create a new node
@@ -275,7 +275,7 @@ export default function Page({ flow }: { flow: FlowType }) {
       setNodes((nds) => nds.concat(newNode));
     },
     // Specify dependencies for useCallback
-    [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot]
+    [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot],
   );
 
   useEffect(() => {
@@ -291,11 +291,12 @@ export default function Page({ flow }: { flow: FlowType }) {
       takeSnapshot();
       setEdges(
         edges.filter(
-          (ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id)
-        )
+          (ns) =>
+            !mynodes.some((n) => ns.source === n.id || ns.target === n.id),
+        ),
       );
     },
-    [takeSnapshot, edges, setEdges]
+    [takeSnapshot, edges, setEdges],
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -309,7 +310,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    []
+    [],
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge) => {

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -30,7 +30,7 @@ export default function ExtraSidebar() {
   const isPending = tabsState[tabId]?.isPending;
   function onDragStart(
     event: React.DragEvent<any>,
-    data: { type: string; node?: APIClassType }
+    data: { type: string; node?: APIClassType },
   ) {
     //start drag event
     var crt = event.currentTarget.cloneNode(true);
@@ -49,7 +49,7 @@ export default function ExtraSidebar() {
       Object.keys(data).forEach((d: keyof APIObjectType, i) => {
         ret[d] = {};
         let keys = Object.keys(data[d]).filter((nd) =>
-          nd.toLowerCase().includes(e.toLowerCase())
+          nd.toLowerCase().includes(e.toLowerCase()),
         );
         keys.forEach((element) => {
           ret[d][element] = data[d][element];
@@ -77,7 +77,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Export" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md",
             )}
             onClick={(event) => {
               openPopUp(<ExportModal />);
@@ -89,7 +89,7 @@ export default function ExtraSidebar() {
         <ShadTooltip content="Code" side="top">
           <button
             className={classNames(
-              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md"
+              "hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300  relative inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 rounded-md",
             )}
             onClick={(event) => {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
@@ -176,8 +176,8 @@ export default function ExtraSidebar() {
                             onDragEnd={() => {
                               document.body.removeChild(
                                 document.getElementsByClassName(
-                                  "cursor-grabbing"
-                                )[0]
+                                  "cursor-grabbing",
+                                )[0],
                               );
                             }}
                           >
@@ -195,7 +195,7 @@ export default function ExtraSidebar() {
               </DisclosureComponent>
             ) : (
               <div key={i}></div>
-            )
+            ),
           )}
       </div>
     </div>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -19,8 +19,8 @@ const NodeToolbarComponent = (props) => {
           props.data.node.template[t].type === "prompt" ||
           props.data.node.template[t].type === "file" ||
           props.data.node.template[t].type === "Any" ||
-          props.data.node.template[t].type === "int")
-    ).length
+          props.data.node.template[t].type === "int"),
+    ).length,
   );
 
   const { setLastCopiedSelection, paste } = useContext(TabsContext);
@@ -43,7 +43,7 @@ const NodeToolbarComponent = (props) => {
           <ShadTooltip content="Duplicate" side="top">
             <button
               className={classNames(
-                "hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+                "hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10",
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -58,7 +58,7 @@ const NodeToolbarComponent = (props) => {
                     y: 10,
                     paneX: reactFlowInstance.getNode(props.data.id).position.x,
                     paneY: reactFlowInstance.getNode(props.data.id).position.y,
-                  }
+                  },
                 );
               }}
             >
@@ -79,7 +79,7 @@ const NodeToolbarComponent = (props) => {
                 "hover:dark:hover:bg-[#242f47]  transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10" +
                   (props.data.node.documentation === ""
                     ? " text-muted-foreground"
-                    : " text-foreground")
+                    : " text-foreground"),
               )}
               target="_blank"
               rel="noopener noreferrer"
@@ -101,7 +101,7 @@ const NodeToolbarComponent = (props) => {
                 "hover:dark:hover:bg-[#242f47]  transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md" +
                   (nodeLength == 0
                     ? " text-muted-foreground"
-                    : " text-foreground")
+                    : " text-foreground"),
               )}
               onClick={(event) => {
                 if (nodeLength == 0) {

src/frontend/src/pages/FlowPage/index.tsx

@@ -31,7 +31,7 @@ export default function FlowPage() {
         href="https://logspace.ai/"
         className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
       >
-        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
+        {version && <div className="mt-1">⛓️ Langflow v{version}</div>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
       </a>
     </div>

src/frontend/src/types/tabs/index.ts

@@ -24,7 +24,7 @@ export type TabsContextType = {
   setTabsState: Dispatch<SetStateAction<TabsState>>;
   paste: (
     selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number }
+    position: { x: number; y: number; paneX?: number; paneY?: number },
   ) => void;
   lastCopiedSelection: { nodes: any; edges: any };
   setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;

src/frontend/src/utils.ts

@@ -467,7 +467,7 @@ export function cn(...inputs: ClassValue[]) {
 export function measureTextHeight(
   text: string,
   width: number,
-  fontSize: number
+  fontSize: number,
 ) {
   const charHeight = fontSize;
   const lineHeight = charHeight * 1.5;
@@ -494,7 +494,7 @@ export function toCamelCase(str: string) {
     .map((word, index) =>
       index === 0
         ? word.toLowerCase()
-        : word[0].toUpperCase() + word.slice(1).toLowerCase()
+        : word[0].toUpperCase() + word.slice(1).toLowerCase(),
     )
     .join("");
 }
@@ -555,7 +555,7 @@ export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
 
 export function isValidConnection(
   { source, target, sourceHandle, targetHandle }: Connection,
-  reactFlowInstance: ReactFlowInstance
+  reactFlowInstance: ReactFlowInstance,
 ) {
   if (
     sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
@@ -602,7 +602,7 @@ export function removeApiKeys(flow: FlowType): FlowType {
 
 export function updateObject<T extends Record<string, any>>(
   reference: T,
-  objectToUpdate: T
+  objectToUpdate: T,
 ): T {
   let clonedObject = _.cloneDeep(objectToUpdate);
   // Loop through each key in the object to update
@@ -633,7 +633,7 @@ export function debounce(func, wait) {
 
 export function updateTemplate(
   reference: APITemplateType,
-  objectToUpdate: APITemplateType
+  objectToUpdate: APITemplateType,
 ): APITemplateType {
   let clonedObject: APITemplateType = _.cloneDeep(reference);
 
@@ -691,7 +691,7 @@ export function toTitleCase(str: string) {
     .map((word, index) => {
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase()
+          word[0].toUpperCase() + word.slice(1).toLowerCase(),
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -703,7 +703,7 @@ export function toTitleCase(str: string) {
     .map((word, index) => {
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase()
+          word[0].toUpperCase() + word.slice(1).toLowerCase(),
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -772,7 +772,7 @@ export function groupByFamily(data, baseClasses) {
   });
 
   let uniq = arrOfParent.filter(
-    (item, index) => arrOfParent.indexOf(item) === index
+    (item, index) => arrOfParent.indexOf(item) === index,
   );
 
   Object.keys(data).map((d) => {
@@ -792,7 +792,7 @@ export function groupByFamily(data, baseClasses) {
 
   let groupedBy = arrOfType.filter((object, index, self) => {
     const foundIndex = self.findIndex(
-      (o) => o.family === object.family && o.type === object.type
+      (o) => o.family === object.family && o.type === object.type,
     );
     return foundIndex === index;
   });
@@ -818,7 +818,7 @@ export function buildTweaks(flow) {
 }
 export function validateNode(
   n: NodeType,
-  reactFlowInstance: ReactFlowInstance
+  reactFlowInstance: ReactFlowInstance,
 ): Array<string> {
   if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
     return [
@@ -844,16 +844,16 @@ export function validateNode(
             .some(
               (e) =>
                 e.targetHandle.split("|")[1] === t &&
-                e.targetHandle.split("|")[2] === n.id
+                e.targetHandle.split("|")[2] === n.id,
             )
           ? [
               `${type} is missing ${
                 template.display_name || toNormalCase(template[t].name)
               }.`,
             ]
-          : []
+          : [],
       ),
-    [] as string[]
+    [] as string[],
   );
 }
 
@@ -878,7 +878,7 @@ export function getRandomDescription(): string {
 export function getRandomName(
   retry: number = 0,
   noSpace: boolean = false,
-  maxRetries: number = 3
+  maxRetries: number = 3,
 ): string {
   const left: string[] = ADJECTIVES;
   const right: string[] = NOUNS;