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);
                 }}
-              />
+              />,
             );
           }}
         >