Merge remote-tracking branch 'origin/release' into celery

docs/docs/components/tools.mdx

@@ -6,4 +6,58 @@ import Admonition from '@theme/Admonition';
     <p>
         We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝
     </p>
-</Admonition>
+</Admonition>
+
+
+### BingSearchRun
+
+Bing Search is a web search engine owned and operated by Microsoft. It provides search results for various types of content, including web pages, images, videos, and news articles. It uses a combination of algorithms and human editors to deliver search results to users.
+
+**Params**
+
+- **Api Wrapper:** A BingSearchAPIWrapper component that takes the search URL and a subscription key.
+
+
+### Calculator
+
+The calculator tool provides mathematical calculation capabilities to an agent by leveraging an LLMMathChain. It allows the agent to perform math when needed to answer questions.
+
+**Params**
+
+- **LLM:** Language Model to use in the calculation.
+
+
+### GoogleSearchResults
+
+A wrapper around Google Search. Useful for when the user needs to answer questions about with more control over the JSON data returned from the API. It returns the full JSON response configured based on the parameters passed to the API wrapper.
+
+**Params**
+
+- **Api Wrapper:** A GoogleSearchAPIWrapper with Google API key and CSE ID
+
+
+### GoogleSearchRun
+
+A quick wrapper around Google Search. It executes the search query and returns just the first result snippet from the highest-priority result type.
+
+**Params**
+
+- **Api Wrapper:** A GoogleSearchAPIWrapper with Google API key and CSE ID
+
+
+### GoogleSerperRun
+
+A low-cost Google Search API.
+
+**Params**
+
+- **Api Wrapper:** A GoogleSerperAPIWrapper component with API key and result keys
+
+
+### InfoSQLDatabaseTool
+
+Tool for getting metadata about a SQL database. The input to this tool is a comma-separated list of tables, and the output is the schema and sample rows for those tables. Example Input: `“table1`, `table2`, `table3”`.
+
+**Params**
+
+- **Db:** SQLDatabase to query.

poetry.lock

@@ -7351,17 +7351,6 @@ files = [
     {file = "validators-0.21.0.tar.gz", hash = "sha256:245b98ab778ed9352a7269c6a8f6c2a839bed5b2a7e3e60273ce399d247dd4b3"},
 ]
 
-[[package]]
-name = "vine"
-version = "5.0.0"
-description = "Promises, promises, promises."
-optional = true
-python-versions = ">=3.6"
-files = [
-    {file = "vine-5.0.0-py2.py3-none-any.whl", hash = "sha256:4c9dceab6f76ed92105027c49c823800dd33cacce13bdedc5b914e3514b7fb30"},
-    {file = "vine-5.0.0.tar.gz", hash = "sha256:7d3b1624a953da82ef63462013bbd271d3eb75751489f9807598e8f340bd637e"},
-]
-
 [[package]]
 name = "watchfiles"
 version = "0.19.0"

pyproject.toml

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

src/backend/langflow/components/agents/OpenAIConversationalAgent.py

@@ -0,0 +1,82 @@
+from langflow import CustomComponent
+from typing import Optional
+from langchain.prompts import SystemMessagePromptTemplate
+from langchain.tools import Tool
+from langchain.schema.memory import BaseMemory
+from langchain.chat_models import ChatOpenAI
+
+from langchain.agents.agent import AgentExecutor
+from langchain.agents.openai_functions_agent.base import OpenAIFunctionsAgent
+from langchain.memory.token_buffer import ConversationTokenBufferMemory
+from langchain.prompts.chat import MessagesPlaceholder
+from langchain.agents.agent_toolkits.conversational_retrieval.openai_functions import (
+    _get_default_system_message,
+)
+
+
+class ConversationalAgent(CustomComponent):
+    display_name: str = "OpenAI Conversational Agent"
+    description: str = "Conversational Agent that can use OpenAI's function calling API"
+
+    def build_config(self):
+        openai_function_models = [
+            "gpt-3.5-turbo-0613",
+            "gpt-3.5-turbo-16k-0613",
+            "gpt-4-0613",
+            "gpt-4-32k-0613",
+        ]
+        return {
+            "tools": {"is_list": True, "display_name": "Tools"},
+            "memory": {"display_name": "Memory"},
+            "system_message": {"display_name": "System Message"},
+            "max_token_limit": {"display_name": "Max Token Limit"},
+            "model_name": {
+                "display_name": "Model Name",
+                "options": openai_function_models,
+                "value": openai_function_models[0],
+            },
+            "code": {"show": False},
+        }
+
+    def build(
+        self,
+        model_name: str,
+        openai_api_key: str,
+        openai_api_base: str,
+        tools: Tool,
+        memory: Optional[BaseMemory] = None,
+        system_message: Optional[SystemMessagePromptTemplate] = None,
+        max_token_limit: int = 2000,
+    ) -> AgentExecutor:
+        llm = ChatOpenAI(
+            model=model_name,
+            openai_api_key=openai_api_key,
+            openai_api_base=openai_api_base,
+        )
+        if not memory:
+            memory_key = "chat_history"
+            memory = ConversationTokenBufferMemory(
+                memory_key=memory_key,
+                return_messages=True,
+                output_key="output",
+                llm=llm,
+                max_token_limit=max_token_limit,
+            )
+        else:
+            memory_key = memory.memory_key  # type: ignore
+
+        _system_message = system_message or _get_default_system_message()
+        prompt = OpenAIFunctionsAgent.create_prompt(
+            system_message=_system_message,  # type: ignore
+            extra_prompt_messages=[MessagesPlaceholder(variable_name=memory_key)],
+        )
+        agent = OpenAIFunctionsAgent(
+            llm=llm, tools=tools, prompt=prompt  # type: ignore
+        )
+        return AgentExecutor(
+            agent=agent,
+            tools=tools,  # type: ignore
+            memory=memory,
+            verbose=True,
+            return_intermediate_steps=True,
+        )

src/backend/langflow/graph/utils.py

@@ -3,6 +3,10 @@ from typing import Any, Union
 from langflow.interface.utils import extract_input_variables_from_prompt
 
 
+class UnbuiltObject:
+    pass
+
+
 def validate_prompt(prompt: str):
     """Validate prompt."""
     if extract_input_variables_from_prompt(prompt):

src/backend/langflow/graph/vertex/base.py

@@ -1,4 +1,5 @@
 import ast
+from langflow.graph.utils import UnbuiltObject
 from langflow.interface.initialize import loading
 from langflow.interface.listing import lazy_load_dict
 from langflow.utils.constants import DIRECT_TYPES
@@ -25,7 +26,7 @@ class Vertex:
         self.edges: List["Edge"] = []
         self.base_type: Optional[str] = base_type
         self._parse_data()
-        self._built_object = None
+        self._built_object = UnbuiltObject()
         self._built = False
         self.artifacts: Dict[str, Any] = {}
         self.task_id: Optional[str] = None
@@ -271,8 +272,14 @@ class Vertex:
         """
         Checks if the built object is None and raises a ValueError if so.
         """
-        if self._built_object is None:
-            raise ValueError(f"Node type {self.vertex_type} not found")
+        if isinstance(self._built_object, UnbuiltObject):
+            raise ValueError(f"{self.vertex_type}: {self._built_object_repr()}")
+        elif self._built_object is None:
+            message = f"{self.vertex_type} returned None."
+            if self.base_type == "custom_components":
+                message += " Make sure your build method returns a component."
+
+            raise ValueError(message)
 
     def build(self, force: bool = False) -> Any:
         if not self._built or force:

src/backend/langflow/graph/vertex/types.py

@@ -226,7 +226,12 @@ class PromptVertex(Vertex):
         # so the prompt format doesn't break
         artifacts.pop("handle_keys", None)
         try:
-            template = self._built_object.template
+            if not hasattr(self._built_object, "template") and hasattr(
+                self._built_object, "prompt"
+            ):
+                template = self._built_object.prompt.template
+            else:
+                template = self._built_object.template
             for key, value in artifacts.items():
                 if value:
                     replace_key = "{" + key + "}"

src/backend/langflow/interface/custom/constants.py

@@ -8,10 +8,13 @@ from langchain.text_splitter import TextSplitter
 from langchain.tools import Tool
 from langchain.vectorstores.base import VectorStore
 from langchain.schema import BaseOutputParser
-
+from langchain.schema.memory import BaseMemory
+from langchain.memory.chat_memory import BaseChatMemory
+from langchain.agents.agent import AgentExecutor
 
 LANGCHAIN_BASE_TYPES = {
     "Chain": Chain,
+    "AgentExecutor": AgentExecutor,
     "Tool": Tool,
     "BaseLLM": BaseLLM,
     "PromptTemplate": PromptTemplate,
@@ -22,6 +25,8 @@ LANGCHAIN_BASE_TYPES = {
     "Embeddings": Embeddings,
     "BaseRetriever": BaseRetriever,
     "BaseOutputParser": BaseOutputParser,
+    "BaseMemory": BaseMemory,
+    "BaseChatMemory": BaseChatMemory,
 }
 
 # Langchain base types plus Python base types

src/backend/langflow/interface/custom/custom_component.py

@@ -51,8 +51,8 @@ class CustomComponent(Component, extra=Extra.allow):
 
         for type_hint in TYPE_HINT_LIST:
             if reader._is_type_hint_used_in_args(
-                "Optional", code
-            ) and not reader._is_type_hint_imported("Optional", code):
+                type_hint, code
+            ) and not reader._is_type_hint_imported(type_hint, code):
                 error_detail = {
                     "error": "Type hint Error",
                     "traceback": f"Type hint '{type_hint}' is used but not imported in the code.",

src/backend/langflow/interface/initialize/utils.py

@@ -51,7 +51,9 @@ def handle_partial_variables(prompt, format_kwargs: Dict):
     }
     # Remove handle_keys otherwise LangChain raises an error
     partial_variables.pop("handle_keys", None)
-    return prompt.partial(**partial_variables)
+    if partial_variables and hasattr(prompt, "partial"):
+        return prompt.partial(**partial_variables)
+    return prompt
 
 
 def handle_variable(params: Dict, input_variable: str, format_kwargs: Dict):

src/backend/langflow/processing/base.py

@@ -5,6 +5,7 @@ from langflow.api.v1.callback import (
 )
 from langflow.processing.process import fix_memory_inputs, format_actions
 from langflow.utils.logger import logger
+from langchain.agents.agent import AgentExecutor
 
 
 async def get_result_and_steps(langchain_object, inputs: Union[dict, str], **kwargs):
@@ -20,7 +21,8 @@ async def get_result_and_steps(langchain_object, inputs: Union[dict, str], **kwa
             # to display intermediate steps
             langchain_object.return_intermediate_steps = True
         try:
-            fix_memory_inputs(langchain_object)
+            if not isinstance(langchain_object, AgentExecutor):
+                fix_memory_inputs(langchain_object)
         except Exception as exc:
             logger.error(f"Error fixing memory inputs: {exc}")
 

src/backend/langflow/services/settings/base.py

@@ -138,12 +138,17 @@ class Settings(BaseSettings):
                     value = json.loads(str(value))
                 if isinstance(value, list):
                     for item in value:
+                        if isinstance(item, Path):
+                            item = str(item)
                         if item not in getattr(self, key):
                             getattr(self, key).append(item)
                     logger.debug(f"Extended {key}")
                 else:
-                    getattr(self, key).append(value)
-                    logger.debug(f"Appended {key}")
+                    if isinstance(value, Path):
+                        value = str(value)
+                    if value not in getattr(self, key):
+                        getattr(self, key).append(value)
+                        logger.debug(f"Appended {key}")
 
             else:
                 setattr(self, key, value)

src/frontend/src/App.tsx

@@ -9,7 +9,7 @@ import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
 import CrashErrorComponent from "./components/CrashErrorComponent";
-import Header from "./components/headerComponent";
+import LoadingComponent from "./components/loadingComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import { TabsContext } from "./contexts/tabsContext";
@@ -25,6 +25,7 @@ export default function App() {
     setIsStackedOpen(true);
   }, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
   const { hardReset } = useContext(TabsContext);
+
   const {
     errorData,
     errorOpen,
@@ -35,6 +36,7 @@ export default function App() {
     successData,
     successOpen,
     setSuccessOpen,
+    loading,
   } = useContext(alertContext);
 
   // Initialize state variable for the list of alerts
@@ -133,8 +135,15 @@ export default function App() {
         }}
         FallbackComponent={CrashErrorComponent}
       >
-        <Header />
-        <Router />
+        {loading ? (
+          <div className="loading-page-panel">
+            <LoadingComponent remSize={50} />
+          </div>
+        ) : (
+          <>
+            <Router />
+          </>
+        )}
       </ErrorBoundary>
       <div></div>
       <div className="app-div" style={{ zIndex: 999 }}>

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

@@ -32,6 +32,13 @@ export default function AccordionComponent({
     value === "" ? setValue(keyValue) : setValue("");
   }
 
+  const handleKeyDown = (event) => {
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
   return (
     <>
       <Accordion
@@ -39,6 +46,7 @@ export default function AccordionComponent({
         className="w-full"
         value={value}
         onValueChange={setValue}
+        onKeyDown={handleKeyDown}
       >
         <AccordionItem value={keyValue} className="border-b">
           <AccordionTrigger

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -10,8 +10,8 @@ type InputProps = {
   maxLength?: number;
   flows: Array<{ id: string; name: string; description: string }>;
   tabId: string;
-  invalidName: boolean;
-  setInvalidName: (invalidName: boolean) => void;
+  invalidName?: boolean;
+  setInvalidName?: (invalidName: boolean) => void;
   setName: (name: string) => void;
   setDescription: (description: string) => void;
   updateFlow: (flow: { id: string; name: string }) => void;
@@ -46,21 +46,29 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
-    if (!nameLists.current.includes(value)) {
-      setInvalidName(false);
-    } else {
-      setInvalidName(true);
+    if (invalidName !== undefined) {
+      if (!nameLists.current.includes(value)) {
+        setInvalidName(false);
+      } else {
+        setInvalidName(true);
+      }
     }
     setName(value);
+    setCurrentName(value);
   };
 
-  const [desc, setDesc] = useState(
-    flows.find((flow) => flow.id === tabId).description
-  );
+  const [currentName, setCurrentName] = useState(name);
+
+  const [currentDescription, setCurrentDescription] = useState(description);
+
+  useEffect(() => {
+    setCurrentName(name);
+    setCurrentDescription(description);
+  }, [name, description]);
 
   const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    flows.find((flow) => flow.id === tabId).description = event.target.value;
-    setDesc(flows.find((flow) => flow.id === tabId).description);
+    flows.find((f) => f.id === tabId).description = event.target.value;
+    setCurrentDescription(flows.find((f) => f.id === tabId).description);
     setDescription(event.target.value);
   };
 
@@ -81,7 +89,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           onChange={handleNameChange}
           type="text"
           name="name"
-          value={name ?? ""}
+          value={currentName ?? ""}
           placeholder="File name"
           id="name"
           maxLength={maxLength}
@@ -96,7 +104,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           name="description"
           id="description"
           onChange={handleDescriptionChange}
-          value={desc}
+          value={currentDescription}
           placeholder="Flow description"
           className="mt-2 max-h-[100px] font-normal"
           rows={3}

src/frontend/src/components/floatComponent/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { FloatComponentType } from "../../types/components";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 import { Input } from "../ui/input";
 
 export default function FloatComponent({
@@ -43,6 +44,9 @@ export default function FloatComponent({
         onChange={(event) => {
           onChange(event.target.value);
         }}
+        onKeyDown={(e) => {
+          handleKeyDown(e, value, "0");
+        }}
       />
     </div>
   );

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import { Input } from "../ui/input";
 
@@ -34,6 +35,9 @@ export default function InputComponent({
         onChange={(event) => {
           onChange(event.target.value);
         }}
+        onKeyDown={(e) => {
+          handleKeyDown(e, value, "");
+        }}
       />
       {password && (
         <button

src/frontend/src/components/inputListComponent/index.tsx

@@ -39,6 +39,12 @@ export default function InputListComponent({
                 newInputList[idx] = event.target.value;
                 onChange(newInputList);
               }}
+              onKeyDown={(e) => {
+                if (e.ctrlKey && e.key === "Backspace") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+              }}
             />
             {idx === value.length - 1 ? (
               <button

src/frontend/src/components/intComponent/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { FloatComponentType } from "../../types/components";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 import { Input } from "../ui/input";
 
 export default function IntComponent({
@@ -37,6 +38,7 @@ export default function IntComponent({
           ) {
             event.preventDefault();
           }
+          handleKeyDown(event, value, "0");
         }}
         type="number"
         step="1"

src/frontend/src/components/ui/popover.tsx

@@ -27,4 +27,4 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverContent, PopoverTrigger };

src/frontend/src/constants/constants.ts

@@ -29,6 +29,7 @@ export const INVALID_CHARACTERS = [
  */
 
 export const regexHighlight = /\{([^}]+)\}/g;
+export const specialCharsRegex = /[!@#$%^&*()\-_=+[\]{}|;:'",.<>/?\\`´]/;
 
 export const programmingLanguages: languageMap = {
   javascript: ".js",
@@ -509,83 +510,4 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
   "/api/v1/validate/prompt",
 ];
 
-export const tabsCode = [];
-
-export function tabsArray(codes: string[], method: number) {
-  if (!method) return;
-  if (method === 0) {
-    return [
-      {
-        name: "cURL",
-        mode: "bash",
-        image: "https://curl.se/logo/curl-symbol-transparent.png",
-        language: "sh",
-        code: codes[0],
-      },
-      {
-        name: "Python API",
-        mode: "python",
-        image:
-          "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-        language: "py",
-        code: codes[1],
-      },
-      {
-        name: "Python Code",
-        mode: "python",
-        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-        language: "py",
-        code: codes[2],
-      },
-      {
-        name: "Chat Widget HTML",
-        description:
-          "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
-        mode: "html",
-        image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-        language: "py",
-        code: codes[3],
-      },
-    ];
-  }
-  return [
-    {
-      name: "cURL",
-      mode: "bash",
-      image: "https://curl.se/logo/curl-symbol-transparent.png",
-      language: "sh",
-      code: codes[0],
-    },
-    {
-      name: "Python API",
-      mode: "python",
-      image:
-        "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
-      language: "py",
-      code: codes[1],
-    },
-    {
-      name: "Python Code",
-      mode: "python",
-      language: "py",
-      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-      code: codes[2],
-    },
-    {
-      name: "Chat Widget HTML",
-      description:
-        "Insert this code anywhere in your &lt;body&gt; tag. To use with react and other libs, check our <a class='link-color' href='https://langflow.org/guidelines/widget'>documentation</a>.",
-      mode: "html",
-      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-      language: "py",
-      code: codes[3],
-    },
-    {
-      name: "Tweaks",
-      mode: "python",
-      image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
-      language: "py",
-      code: codes[4],
-    },
-  ];
-}
+export const skipNodeUpdate = ["CustomComponent"];

src/frontend/src/contexts/alertContext.tsx

@@ -23,12 +23,16 @@ type alertContextType = {
   pushNotificationList: (Object: AlertItemType) => void;
   clearNotificationList: () => void;
   removeFromNotificationList: (index: string) => void;
+  loading: boolean;
+  setLoading: (newState: boolean) => void;
 };
 
 //initial values to alertContextType
 const initialValue: alertContextType = {
   errorData: { title: "", list: [] },
   setErrorData: () => {},
+  loading: true,
+  setLoading: () => {},
   errorOpen: false,
   setErrorOpen: () => {},
   noticeData: { title: "", link: "" },
@@ -55,6 +59,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
     list?: Array<string>;
   }>({ title: "", list: [] });
   const [errorOpen, setErrorOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [noticeData, setNoticeDataState] = useState<{
     title: string;
     link?: string;
@@ -141,6 +146,8 @@ export function AlertProvider({ children }: { children: ReactNode }) {
         removeFromNotificationList,
         clearNotificationList,
         notificationList,
+        loading,
+        setLoading,
         pushNotificationList,
         setNotificationCenter,
         notificationCenter,

src/frontend/src/contexts/index.tsx

@@ -16,17 +16,17 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
       <TooltipProvider>
         <ReactFlowProvider>
           <DarkProvider>
-            <TypesProvider>
-              <LocationProvider>
-                <AlertProvider>
+            <AlertProvider>
+              <TypesProvider>
+                <LocationProvider>
                   <SSEProvider>
                     <TabsProvider>
                       <UndoRedoProvider>{children}</UndoRedoProvider>
                     </TabsProvider>
                   </SSEProvider>
-                </AlertProvider>
-              </LocationProvider>
-            </TypesProvider>
+                </LocationProvider>
+              </TypesProvider>
+            </AlertProvider>
           </DarkProvider>
         </ReactFlowProvider>
       </TooltipProvider>

src/frontend/src/contexts/tabsContext.tsx

@@ -9,6 +9,7 @@ import {
 } from "react";
 import { addEdge } from "reactflow";
 import ShortUniqueId from "short-unique-id";
+import { skipNodeUpdate } from "../constants/constants";
 import {
   deleteFlowFromDatabase,
   downloadFlowsFromDatabase,
@@ -163,6 +164,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function processFlowNodes(flow) {
     if (!flow.data || !flow.data.nodes) return;
     flow.data.nodes.forEach((node: NodeType) => {
+      if (skipNodeUpdate.includes(node.data.type)) return;
       const template = templates[node.data.type];
       if (!template) {
         setErrorData({ title: `Unknown node type: ${node.data.type}` });
@@ -508,6 +510,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   const updateNodes = (nodes, edges) => {
     nodes.forEach((node) => {
+      if (skipNodeUpdate.includes(node.data.type)) return;
       const template = templates[node.data.type];
       if (!template) {
         setErrorData({ title: `Unknown node type: ${node.data.type}` });

src/frontend/src/contexts/typesContext.tsx

@@ -1,8 +1,15 @@
-import { createContext, ReactNode, useEffect, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { Node } from "reactflow";
 import { getAll } from "../controllers/API";
 import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
+import { alertContext } from "./alertContext";
 
 //context to share types adn functions from nodes to flow
 
@@ -25,6 +32,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
   const [reactFlowInstance, setReactFlowInstance] = useState(null);
   const [templates, setTemplates] = useState({});
   const [data, setData] = useState({});
+  const { setLoading } = useContext(alertContext);
 
   useEffect(() => {
     let delay = 1000; // Start delay of 1 second
@@ -40,6 +48,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
         const result = await getAll();
         // Make sure to only update the state if the component is still mounted.
         if (isMounted) {
+          setLoading(false);
           setData(result.data);
           setTemplates(
             Object.keys(result.data).reduce((acc, curr) => {

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

@@ -1,4 +1,4 @@
-import { ReactNode, forwardRef, useContext, useState } from "react";
+import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
@@ -9,17 +9,17 @@ import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
-  const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
-    useContext(TabsContext);
+  const { flows, tabId, updateFlow, downloadFlow } = useContext(TabsContext);
   const [checked, setChecked] = useState(false);
-  const [name, setName] = useState(
-    flows.find((flow) => flow.id === tabId).name
-  );
-  const [invalidName, setInvalidName] = useState(false);
-  const [description, setDescription] = useState(
-    flows.find((flow) => flow.id === tabId).description
-  );
+  const flow = flows.find((f) => f.id === tabId);
+  useEffect(() => {
+    setName(flow.name);
+    setDescription(flow.description);
+  }, [flow.name, flow.description]);
+  const [name, setName] = useState(flow.name);
+  const [description, setDescription] = useState(flow.description);
   const [open, setOpen] = useState(false);
+
   return (
     <BaseModal size="smaller" open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{props.children}</BaseModal.Trigger>

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

@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
@@ -14,17 +14,15 @@ export default function FlowSettingsModal({
   open: boolean;
   setOpen: (open: boolean) => void;
 }) {
-  const { setErrorData, setSuccessData } = useContext(alertContext);
-  const ref = useRef();
-  const { flows, tabId, updateFlow, setTabsState, saveFlow } =
-    useContext(TabsContext);
-  const maxLength = 50;
-  const [name, setName] = useState(
-    flows.find((flow) => flow.id === tabId).name
-  );
-  const [description, setDescription] = useState(
-    flows.find((flow) => flow.id === tabId).description
-  );
+  const { setSuccessData } = useContext(alertContext);
+  const { flows, tabId, updateFlow, saveFlow } = useContext(TabsContext);
+  const flow = flows.find((f) => f.id === tabId);
+  useEffect(() => {
+    setName(flow.name);
+    setDescription(flow.description);
+  }, [flow.name, flow.description]);
+  const [name, setName] = useState(flow.name);
+  const [description, setDescription] = useState(flow.description);
   const [invalidName, setInvalidName] = useState(false);
 
   function handleClick() {

src/frontend/src/modals/genericModal/index.tsx

@@ -16,6 +16,7 @@ import { TypeModal } from "../../constants/enums";
 import { alertContext } from "../../contexts/alertContext";
 import { postValidatePrompt } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
+import { handleKeyDown } from "../../utils/reactflowUtils";
 import {
   classNames,
   getRandomKeyByssmm,
@@ -213,6 +214,9 @@ export default function GenericModal({
                   checkVariables(event.target.value);
                 }}
                 placeholder="Type message here."
+                onKeyDown={(e) => {
+                  handleKeyDown(e, inputValue, "");
+                }}
               />
             ) : type === TypeModal.PROMPT && !isEdit ? (
               <TextAreaContentView />
@@ -225,6 +229,9 @@ export default function GenericModal({
                   setInputValue(event.target.value);
                 }}
                 placeholder="Type message here."
+                onKeyDown={(e) => {
+                  handleKeyDown(e, value, "");
+                }}
               />
             ) : (
               <></>

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

@@ -6,6 +6,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
 import IconComponent from "../../components/genericIconComponent";
+import Header from "../../components/headerComponent";
 import { getExamples } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
 export default function CommunityPage() {
@@ -42,61 +43,65 @@ export default function CommunityPage() {
     handleExamples();
   }, []);
   return (
-    <div className="community-page-arrangement">
-      <div className="community-page-nav-arrangement">
-        <span className="community-page-nav-title">
-          <IconComponent name="Users2" className="w-6" />
-          Community Examples
+    <>
+      <Header />
+
+      <div className="community-page-arrangement">
+        <div className="community-page-nav-arrangement">
+          <span className="community-page-nav-title">
+            <IconComponent name="Users2" className="w-6" />
+            Community Examples
+          </span>
+          <div className="community-page-nav-button">
+            <a
+              href="https://github.com/logspace-ai/langflow_examples"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Button variant="primary">
+                <IconComponent
+                  name="GithubIcon"
+                  className="main-page-nav-button"
+                />
+                Add Your Example
+              </Button>
+            </a>
+          </div>
+        </div>
+        <span className="community-page-description-text">
+          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>
-        <div className="community-page-nav-button">
-          <a
-            href="https://github.com/logspace-ai/langflow_examples"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Button variant="primary">
-              <IconComponent
-                name="GithubIcon"
-                className="main-page-nav-button"
+        <div className="community-pages-flows-panel">
+          {!loadingExamples &&
+            examples.map((flow, idx) => (
+              <CardComponent
+                key={idx}
+                flow={flow}
+                id={flow.id}
+                button={
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="whitespace-nowrap "
+                    onClick={() => {
+                      addFlow(flow, true).then((id) => {
+                        navigate("/flow/" + id);
+                      });
+                    }}
+                  >
+                    <IconComponent
+                      name="GitFork"
+                      className="main-page-nav-button"
+                    />
+                    Fork Example
+                  </Button>
+                }
               />
-              Add Your Example
-            </Button>
-          </a>
+            ))}
         </div>
       </div>
-      <span className="community-page-description-text">
-        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>
-      <div className="community-pages-flows-panel">
-        {!loadingExamples &&
-          examples.map((flow, idx) => (
-            <CardComponent
-              key={idx}
-              flow={flow}
-              id={flow.id}
-              button={
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="whitespace-nowrap "
-                  onClick={() => {
-                    addFlow(flow, true).then((id) => {
-                      navigate("/flow/" + id);
-                    });
-                  }}
-                >
-                  <IconComponent
-                    name="GitFork"
-                    className="main-page-nav-button"
-                  />
-                  Fork Example
-                </Button>
-              }
-            />
-          ))}
-      </div>
-    </div>
+    </>
   );
 }

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

@@ -35,7 +35,13 @@ const nodeTypes = {
   genericNode: GenericNode,
 };
 
-export default function Page({ flow }: { flow: FlowType }) {
+export default function Page({
+  flow,
+  view,
+}: {
+  flow: FlowType;
+  view?: boolean;
+}) {
   let {
     updateFlow,
     uploadFlow,
@@ -360,7 +366,7 @@ export default function Page({ flow }: { flow: FlowType }) {
 
   return (
     <div className="flex h-full overflow-hidden">
-      <ExtraSidebar />
+      {!view && <ExtraSidebar />}
       {/* Main area */}
       <main className="flex flex-1">
         {/* Primary column */}
@@ -402,14 +408,21 @@ export default function Page({ flow }: { flow: FlowType }) {
                   className="theme-attribution"
                   minZoom={0.01}
                   maxZoom={8}
+                  zoomOnScroll={!view}
+                  zoomOnPinch={!view}
+                  panOnDrag={!view}
                 >
                   <Background className="" />
-                  <Controls
-                    className="bg-muted fill-foreground stroke-foreground text-primary
+                  {!view && (
+                    <Controls
+                      className="bg-muted fill-foreground stroke-foreground text-primary
                    [&>button]:border-b-border hover:[&>button]:bg-border"
-                  ></Controls>
+                    ></Controls>
+                  )}
                 </ReactFlow>
-                <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+                {!view && (
+                  <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+                )}
               </div>
             ) : (
               <></>

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

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import Header from "../../components/headerComponent";
 import { TabsContext } from "../../contexts/tabsContext";
 import { getVersion } from "../../controllers/API";
 import Page from "./components/PageComponent";
@@ -22,20 +23,23 @@ export default function FlowPage() {
   }, []);
 
   return (
-    <div className="flow-page-positioning">
-      {flows.length > 0 &&
-        tabId !== "" &&
-        flows.findIndex((flow) => flow.id === tabId) !== -1 && (
-          <Page flow={flows.find((flow) => flow.id === tabId)} />
-        )}
-      <a
-        target={"_blank"}
-        href="https://logspace.ai/"
-        className="logspace-page-icon"
-      >
-        {version && <div className="mt-1">⛓️ Langflow v{version}</div>}
-        <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
-      </a>
-    </div>
+    <>
+      <Header />
+      <div className="flow-page-positioning">
+        {flows.length > 0 &&
+          tabId !== "" &&
+          flows.findIndex((flow) => flow.id === tabId) !== -1 && (
+            <Page flow={flows.find((flow) => flow.id === tabId)} />
+          )}
+        <a
+          target={"_blank"}
+          href="https://logspace.ai/"
+          className="logspace-page-icon"
+        >
+          {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/pages/MainPage/index.tsx

@@ -2,6 +2,7 @@ import { useContext, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
 import IconComponent from "../../components/genericIconComponent";
+import Header from "../../components/headerComponent";
 import { Button } from "../../components/ui/button";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { TabsContext } from "../../contexts/tabsContext";
@@ -17,74 +18,77 @@ export default function HomePage() {
 
   // Personal flows display
   return (
-    <div className="main-page-panel">
-      <div className="main-page-nav-arrangement">
-        <span className="main-page-nav-title">
-          <IconComponent name="Home" className="w-6" />
-          {USER_PROJECTS_HEADER}
+    <>
+      <Header />
+      <div className="main-page-panel">
+        <div className="main-page-nav-arrangement">
+          <span className="main-page-nav-title">
+            <IconComponent name="Home" className="w-6" />
+            {USER_PROJECTS_HEADER}
+          </span>
+          <div className="button-div-style">
+            <Button
+              variant="primary"
+              onClick={() => {
+                downloadFlows();
+              }}
+            >
+              <IconComponent name="Download" className="main-page-nav-button" />
+              Download Collection
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => {
+                uploadFlows();
+              }}
+            >
+              <IconComponent name="Upload" className="main-page-nav-button" />
+              Upload Collection
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => {
+                addFlow(null, true).then((id) => {
+                  navigate("/flow/" + id);
+                });
+              }}
+            >
+              <IconComponent name="Plus" className="main-page-nav-button" />
+              New Project
+            </Button>
+          </div>
+        </div>
+        <span className="main-page-description-text">
+          Manage your personal projects. Download or upload your collection.
         </span>
-        <div className="button-div-style">
-          <Button
-            variant="primary"
-            onClick={() => {
-              downloadFlows();
-            }}
-          >
-            <IconComponent name="Download" className="main-page-nav-button" />
-            Download Collection
-          </Button>
-          <Button
-            variant="primary"
-            onClick={() => {
-              uploadFlows();
-            }}
-          >
-            <IconComponent name="Upload" className="main-page-nav-button" />
-            Upload Collection
-          </Button>
-          <Button
-            variant="primary"
-            onClick={() => {
-              addFlow(null, true).then((id) => {
-                navigate("/flow/" + id);
-              });
-            }}
-          >
-            <IconComponent name="Plus" className="main-page-nav-button" />
-            New Project
-          </Button>
+        <div className="main-page-flows-display">
+          {flows.map((flow, idx) => (
+            <CardComponent
+              key={idx}
+              flow={flow}
+              id={flow.id}
+              button={
+                <Link to={"/flow/" + flow.id}>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="whitespace-nowrap "
+                  >
+                    <IconComponent
+                      name="ExternalLink"
+                      className="main-page-nav-button"
+                    />
+                    Edit Flow
+                  </Button>
+                </Link>
+              }
+              onDelete={() => {
+                removeFlow(flow.id);
+              }}
+            />
+          ))}
         </div>
       </div>
-      <span className="main-page-description-text">
-        Manage your personal projects. Download or upload your collection.
-      </span>
-      <div className="main-page-flows-display">
-        {flows.map((flow, idx) => (
-          <CardComponent
-            key={idx}
-            flow={flow}
-            id={flow.id}
-            button={
-              <Link to={"/flow/" + flow.id}>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="whitespace-nowrap "
-                >
-                  <IconComponent
-                    name="ExternalLink"
-                    className="main-page-nav-button"
-                  />
-                  Edit Flow
-                </Button>
-              </Link>
-            }
-            onDelete={() => {
-              removeFlow(flow.id);
-            }}
-          />
-        ))}
-      </div>
-    </div>
+    </>
   );
 }

src/frontend/src/pages/ViewPage/index.tsx

@@ -0,0 +1,33 @@
+import { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { TabsContext } from "../../contexts/tabsContext";
+import { getVersion } from "../../controllers/API";
+import Page from "../FlowPage/components/PageComponent";
+
+export default function ViewPage() {
+  const { flows, tabId, setTabId } = useContext(TabsContext);
+  const { id } = useParams();
+
+  // Set flow tab id
+  useEffect(() => {
+    setTabId(id);
+  }, [id]);
+
+  // Initialize state variable for the version
+  const [version, setVersion] = useState("");
+  useEffect(() => {
+    getVersion().then((data) => {
+      setVersion(data.version);
+    });
+  }, []);
+
+  return (
+    <div className="flow-page-positioning">
+      {flows.length > 0 &&
+        tabId !== "" &&
+        flows.findIndex((flow) => flow.id === tabId) !== -1 && (
+          <Page view flow={flows.find((flow) => flow.id === tabId)} />
+        )}
+    </div>
+  );
+}

src/frontend/src/routes.tsx

@@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom";
 import CommunityPage from "./pages/CommunityPage";
 import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
+import ViewPage from "./pages/ViewPage";
 
 const Router = () => {
   return (
@@ -10,6 +11,7 @@ const Router = () => {
       <Route path="/community" element={<CommunityPage />} />
       <Route path="/flow/:id/">
         <Route path="" element={<FlowPage />} />
+        <Route path="view" element={<ViewPage />} />
       </Route>
       <Route path="*" element={<HomePage />} />
     </Routes>

src/frontend/src/style/applies.css

@@ -192,6 +192,10 @@
     @apply flex w-full;
   }
 
+  .loading-page-panel {
+    @apply h-full w-full flex justify-center items-center bg-muted;
+  }
+
   .main-page-panel {
     @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16;
   }

src/frontend/src/utils/reactflowUtils.ts

@@ -1,5 +1,6 @@
 import _ from "lodash";
 import { Connection, Edge, ReactFlowInstance } from "reactflow";
+import { specialCharsRegex } from "../constants/constants";
 import { APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
 import { cleanEdgesType } from "../types/utils/reactflowUtils";
@@ -233,6 +234,34 @@ export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) {
   return newName;
 }
 
+export function handleKeyDown(
+  e: React.KeyboardEvent<HTMLInputElement>,
+  inputValue: string | string[] | null,
+  block: string
+) {
+  console.log(e, inputValue, block);
+  //condition to fix bug control+backspace on Windows/Linux
+  if (
+    (typeof inputValue === "string" &&
+      (e.metaKey === true || e.ctrlKey === true) &&
+      e.key === "Backspace" &&
+      (inputValue === block ||
+        inputValue?.charAt(inputValue?.length - 1) === " " ||
+        specialCharsRegex.test(inputValue?.charAt(inputValue?.length - 1)))) ||
+    (navigator.userAgent.toUpperCase().includes("MAC") &&
+      e.ctrlKey === true &&
+      e.key === "Backspace")
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  if (e.ctrlKey === true && e.key === "Backspace" && inputValue === block) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+
 export function getConnectedNodes(
   edge: Edge,
   nodes: Array<NodeType>