Merge branch 'release' into bug/loadingIndicator

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

@@ -46,7 +46,7 @@ def get_all():
         custom_component_dicts = []
         processed_paths = []
         for path in settings.COMPONENTS_PATH:
-            if path in processed_paths:
+            if str(path) in processed_paths:
                 continue
             custom_component_dict = build_langchain_custom_component_list_from_path(
                 str(path)

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/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/settings.py

@@ -135,8 +135,11 @@ class Settings(BaseSettings):
                             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,6 @@ 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";
@@ -142,7 +141,6 @@ export default function App() {
           </div>
         ) : (
           <>
-            <Header />
             <Router />
           </>
         )}

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((f) => f.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((f) => f.id === tabId).description = event.target.value;
-    setDesc(flows.find((f) => f.id === tabId).description);
+    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={(e) => {
           onChange(e.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={(e) => {
           onChange(e.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] = e.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/constants/constants.ts

@@ -29,6 +29,7 @@ export const INVALID_CHARACTERS = [
  */
 
 export const regexHighlight = /\{([^}]+)\}/g;
+export const specialCharsRegex = /[!@#$%^&*()\-_=+[\]{}|;:'",.<>/?\\`´]/;
 
 export const programmingLanguages: languageMap = {
   javascript: ".js",
@@ -508,3 +509,5 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
   "/api/v1/custom_component",
   "/api/v1/validate/prompt",
 ];
+
+export const skipNodeUpdate = ["CustomComponent"];

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}` });
@@ -506,6 +508,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/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,14 +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((f) => f.id === tabId).name);
-  const [description, setDescription] = useState(
-    flows.find((f) => f.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,15 +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((f) => f.id === tabId).name);
-  const [description, setDescription] = useState(
-    flows.find((f) => f.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(e.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(e.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,
@@ -357,7 +363,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 */}
@@ -399,14 +405,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/utils/reactflowUtils.ts

@@ -1,5 +1,6 @@
 import _ from "lodash";
-import { Connection, ReactFlowInstance } from "reactflow";
+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";
@@ -232,3 +233,40 @@ 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>
+): Array<NodeType> {
+  const sourceId = edge.source;
+  const targetId = edge.target;
+  return nodes.filter((node) => node.id === targetId || node.id === sourceId);
+}

src/frontend/src/utils/styleUtils.ts

@@ -65,7 +65,6 @@ import {
   XCircle,
   Zap,
 } from "lucide-react";
-import { Edge, Node } from "reactflow";
 import { AirbyteIcon } from "../icons/Airbyte";
 import { AnthropicIcon } from "../icons/Anthropic";
 import { BingIcon } from "../icons/Bing";
@@ -277,8 +276,3 @@ export const nodeIconsLucide = {
   MessageSquare,
   MoreHorizontal,
 };
-export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
-  const sourceId = edge.source;
-  const targetId = edge.target;
-  return nodes.filter((node) => node.id === targetId || node.id === sourceId);
-}