merge fix

src/backend/langflow/config.yaml

@@ -280,6 +280,8 @@ vectorstores:
 wrappers:
   RequestsWrapper:
     documentation: ""
+  SQLDatabase:
+    documentation: ""
 output_parsers:
   StructuredOutputParser:
     documentation: "https://python.langchain.com/docs/modules/model_io/output_parsers/structured"

src/backend/langflow/custom/customs.py

@@ -23,6 +23,7 @@ CUSTOM_NODES = {
     },
     "memories": {
         "PostgresChatMessageHistory": frontend_node.memories.PostgresChatMessageHistoryFrontendNode(),
+        "MongoDBChatMessageHistory": frontend_node.memories.MongoDBChatMessageHistoryFrontendNode(),
     },
     "chains": {
         "SeriesCharacterChain": frontend_node.chains.SeriesCharacterChainNode(),

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

@@ -10,6 +10,7 @@ from langchain.chains.base import Chain
 from langchain.chat_models.base import BaseChatModel
 from langchain.tools import BaseTool
 from langflow.utils import validate
+from langflow.interface.wrappers.base import wrapper_creator
 
 
 def import_module(module_path: str) -> Any:
@@ -96,7 +97,11 @@ def import_prompt(prompt: str) -> Type[PromptTemplate]:
 
 def import_wrapper(wrapper: str) -> Any:
     """Import wrapper from wrapper name"""
-    return import_module(f"from langchain.requests import {wrapper}")
+    if (
+        isinstance(wrapper_creator.type_dict, dict)
+        and wrapper in wrapper_creator.type_dict
+    ):
+        return wrapper_creator.type_dict.get(wrapper)
 
 
 def import_toolkit(toolkit: str) -> Any:

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

@@ -20,6 +20,7 @@ from langflow.interface.toolkits.base import toolkits_creator
 from langflow.interface.chains.base import chain_creator
 from langflow.interface.output_parsers.base import output_parser_creator
 from langflow.interface.retrievers.base import retriever_creator
+from langflow.interface.wrappers.base import wrapper_creator
 from langflow.interface.utils import load_file_into_dict
 from langflow.utils import validate
 from langchain.chains.base import Chain
@@ -89,10 +90,21 @@ def instantiate_based_on_type(class_object, base_type, node_type, params):
         return instantiate_retriever(node_type, class_object, params)
     elif base_type == "memory":
         return instantiate_memory(node_type, class_object, params)
+    elif base_type == "wrappers":
+        return instantiate_wrapper(node_type, class_object, params)
     else:
         return class_object(**params)
 
 
+def instantiate_wrapper(node_type, class_object, params):
+    if node_type in wrapper_creator.from_method_nodes:
+        method = wrapper_creator.from_method_nodes[node_type]
+        if class_method := getattr(class_object, method, None):
+            return class_method(**params)
+        raise ValueError(f"Method {method} not found in {class_object}")
+    return class_object(**params)
+
+
 def instantiate_output_parser(node_type, class_object, params):
     if node_type in output_parser_creator.from_method_nodes:
         method = output_parser_creator.from_method_nodes[node_type]

src/backend/langflow/interface/wrappers/base.py

@@ -1,25 +1,36 @@
 from typing import Dict, List, Optional
 
-from langchain import requests
+from langchain import requests, sql_database
 
 from langflow.interface.base import LangChainTypeCreator
 from langflow.utils.logger import logger
-from langflow.utils.util import build_template_from_class
+from langflow.utils.util import build_template_from_class, build_template_from_method
 
 
 class WrapperCreator(LangChainTypeCreator):
     type_name: str = "wrappers"
 
+    from_method_nodes = {"SQLDatabase": "from_uri"}
+
     @property
     def type_to_loader_dict(self) -> Dict:
         if self.type_dict is None:
             self.type_dict = {
-                wrapper.__name__: wrapper for wrapper in [requests.TextRequestsWrapper]
+                wrapper.__name__: wrapper
+                for wrapper in [requests.TextRequestsWrapper, sql_database.SQLDatabase]
             }
         return self.type_dict
 
     def get_signature(self, name: str) -> Optional[Dict]:
         try:
+            if name in self.from_method_nodes:
+                return build_template_from_method(
+                    name,
+                    type_to_cls_dict=self.type_to_loader_dict,
+                    add_function=True,
+                    method_name=self.from_method_nodes[name],
+                )
+
             return build_template_from_class(name, self.type_to_loader_dict)
         except ValueError as exc:
             raise ValueError("Wrapper not found") from exc

src/backend/langflow/template/frontend_node/memories.py

@@ -4,6 +4,10 @@ from langflow.template.field.base import TemplateField
 from langflow.template.frontend_node.base import FrontendNode
 from langflow.template.template.base import Template
 from langchain.memory.chat_message_histories.postgres import DEFAULT_CONNECTION_STRING
+from langchain.memory.chat_message_histories.mongodb import (
+    DEFAULT_COLLECTION_NAME,
+    DEFAULT_DBNAME,
+)
 
 
 class MemoryFrontendNode(FrontendNode):
@@ -120,3 +124,56 @@ class PostgresChatMessageHistoryFrontendNode(MemoryFrontendNode):
     )
     description: str = "Memory store with Postgres"
     base_classes: list[str] = ["PostgresChatMessageHistory", "BaseChatMessageHistory"]
+
+
+class MongoDBChatMessageHistoryFrontendNode(MemoryFrontendNode):
+    name: str = "MongoDBChatMessageHistory"
+    template: Template = Template(
+        # langchain/memory/chat_message_histories/mongodb.py
+        # connection_string: str,
+        #     session_id: str,
+        #     database_name: str = DEFAULT_DBNAME,
+        #     collection_name: str = DEFAULT_COLLECTION_NAME,
+        type_name="MongoDBChatMessageHistory",
+        fields=[
+            TemplateField(
+                field_type="str",
+                required=True,
+                placeholder="",
+                is_list=False,
+                show=True,
+                multiline=False,
+                name="session_id",
+            ),
+            TemplateField(
+                field_type="str",
+                required=True,
+                show=True,
+                name="connection_string",
+                value="",
+                info="MongoDB connection string (e.g mongodb://mongo_user:password123@mongo:27017)",
+            ),
+            TemplateField(
+                field_type="str",
+                required=True,
+                placeholder="",
+                is_list=False,
+                show=True,
+                multiline=False,
+                value=DEFAULT_DBNAME,
+                name="database_name",
+            ),
+            TemplateField(
+                field_type="str",
+                required=True,
+                placeholder="",
+                is_list=False,
+                show=True,
+                multiline=False,
+                value=DEFAULT_COLLECTION_NAME,
+                name="collection_name",
+            ),
+        ],
+    )
+    description: str = "Memory store with MongoDB"
+    base_classes: list[str] = ["MongoDBChatMessageHistory", "BaseChatMessageHistory"]

src/frontend/src/App.tsx

@@ -1,20 +1,19 @@
-import "reactflow/dist/style.css";
-import { useState, useEffect, useContext } from "react";
-import "./App.css";
-import { useLocation } from "react-router-dom";
 import _ from "lodash";
+import { useContext, useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import "reactflow/dist/style.css";
+import "./App.css";
 
+import { ErrorBoundary } from "react-error-boundary";
 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 { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
-import { ErrorBoundary } from "react-error-boundary";
-import CrashErrorComponent from "./components/CrashErrorComponent";
 import { TabsContext } from "./contexts/tabsContext";
-import { getVersion } from "./controllers/API";
 import Router from "./routes";
-import Header from "./components/headerComponent";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =

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

@@ -1,31 +1,30 @@
+import { Info } from "lucide-react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import Dropdown from "../../../../components/dropdownComponent";
+import FloatComponent from "../../../../components/floatComponent";
+import InputComponent from "../../../../components/inputComponent";
+import InputFileComponent from "../../../../components/inputFileComponent";
+import InputListComponent from "../../../../components/inputListComponent";
+import IntComponent from "../../../../components/intComponent";
+import PromptAreaComponent from "../../../../components/promptComponent";
+import TextAreaComponent from "../../../../components/textAreaComponent";
+import ToggleShadComponent from "../../../../components/toggleShadComponent";
+import { PopUpContext } from "../../../../contexts/popUpContext";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { typesContext } from "../../../../contexts/typesContext";
+import { ParameterComponentType } from "../../../../types/components";
 import {
   classNames,
   getRandomKeyByssmm,
   groupByFamily,
   isValidConnection,
+  nodeColors,
   nodeIconsLucide,
+  nodeNames,
 } from "../../../../utils";
-import { useContext, useEffect, useRef, useState } from "react";
-import InputComponent from "../../../../components/inputComponent";
-import InputListComponent from "../../../../components/inputListComponent";
-import TextAreaComponent from "../../../../components/textAreaComponent";
-import { typesContext } from "../../../../contexts/typesContext";
-import { ParameterComponentType } from "../../../../types/components";
-import FloatComponent from "../../../../components/floatComponent";
-import Dropdown from "../../../../components/dropdownComponent";
-import CodeAreaComponent from "../../../../components/codeAreaComponent";
-import InputFileComponent from "../../../../components/inputFileComponent";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import IntComponent from "../../../../components/intComponent";
-import PromptAreaComponent from "../../../../components/promptComponent";
-import { nodeNames } from "../../../../utils";
-import React from "react";
-import { nodeColors } from "../../../../utils";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
-import { PopUpContext } from "../../../../contexts/popUpContext";
-import ToggleShadComponent from "../../../../components/toggleShadComponent";
-import { Info } from "lucide-react";
 
 export default function ParameterComponent({
   left,

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

@@ -1,3 +1,15 @@
+import { Zap } from "lucide-react";
+import { useContext, useEffect, useRef, useState } from "react";
+import { NodeToolbar } from "reactflow";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import Tooltip from "../../components/TooltipComponent";
+import { useSSE } from "../../contexts/SSEContext";
+import { alertContext } from "../../contexts/alertContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { typesContext } from "../../contexts/typesContext";
+import NodeModal from "../../modals/NodeModal";
+import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
+import { NodeDataType } from "../../types/flow";
 import {
   classNames,
   nodeColors,
@@ -5,18 +17,6 @@ import {
   toTitleCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
-import { typesContext } from "../../contexts/typesContext";
-import { useContext, useState, useEffect, useRef } from "react";
-import { NodeDataType } from "../../types/flow";
-import { alertContext } from "../../contexts/alertContext";
-import { PopUpContext } from "../../contexts/popUpContext";
-import NodeModal from "../../modals/NodeModal";
-import Tooltip from "../../components/TooltipComponent";
-import { NodeToolbar } from "reactflow";
-import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import { useSSE } from "../../contexts/SSEContext";
-import { Zap } from "lucide-react";
 
 export default function GenericNode({
   data,
@@ -94,10 +94,7 @@ export default function GenericNode({
               }}
             />
             <div className="generic-node-tooltip-div">
-              <ShadTooltip
+              <ShadTooltip content={data.node.display_name}>
-                delayDuration={1500}
-                content={data.node.display_name}
-              >
                 <div className="generic-node-tooltip-div text-primary">
                   {data.node.display_name}
                 </div>

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -1,8 +1,8 @@
-import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
+import { CheckCircle2, Info, X, XCircle } from "lucide-react";
 import { useState } from "react";
+import { Link } from "react-router-dom";
 import { SingleAlertComponentType } from "../../../../types/alerts";
-import { X, CheckCircle2, Info, XCircle } from "lucide-react";
 
 export default function SingleAlert({
   dropItem,

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,10 +1,10 @@
-import { useContext, useEffect, useRef } from "react";
+import { Trash2, X } from "lucide-react";
+import { useContext, useRef } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import SingleAlert from "./components/singleAlertComponent";
-import { AlertDropdownType } from "../../types/alerts";
 import { PopUpContext } from "../../contexts/popUpContext";
+import { AlertDropdownType } from "../../types/alerts";
 import { useOnClickOutside } from "../hooks/useOnClickOutside";
-import { X, Trash2 } from "lucide-react";
+import SingleAlert from "./components/singleAlertComponent";
 
 export default function AlertDropdown({}: AlertDropdownType) {
   const { closePopUp } = useContext(PopUpContext);

src/frontend/src/alerts/error/index.tsx

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
+import { XCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { ErrorAlertType } from "../../types/alerts";
-import { XCircle } from "lucide-react";
 
 export default function ErrorAlert({
   title,

src/frontend/src/alerts/notice/index.tsx

@@ -1,8 +1,8 @@
 import { Transition } from "@headlessui/react";
+import { Info } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
-import { Info } from "lucide-react";
 
 export default function NoticeAlert({
   title,

src/frontend/src/alerts/success/index.tsx

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
+import { CheckCircle2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
-import { CheckCircle2 } from "lucide-react";
 
 export default function SuccessAlert({
   title,

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

@@ -1,16 +1,11 @@
-import { ReactElement, useContext, useEffect, useRef, useState } from "react";
+import { useState } from "react";
-import {
-  AccordionComponentType,
-  ProgressBarType,
-} from "../../types/components";
-import { Progress } from "../../components/ui/progress";
-import { setInterval } from "timers/promises";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "../../components/ui/accordion";
+import { AccordionComponentType } from "../../types/components";
 
 export default function AccordionComponent({
   trigger,

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

@@ -1,7 +1,7 @@
-import React, { useState, ChangeEvent } from "react";
+import React, { ChangeEvent, useState } from "react";
-import { Textarea } from "../../components/ui/textarea";
-import { Label } from "../../components/ui/label";
 import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { Textarea } from "../../components/ui/textarea";
 
 type InputProps = {
   name: string | null;

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

@@ -1,8 +1,8 @@
 import { Disclosure } from "@headlessui/react";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
-import { classNames } from "../../utils";
 import { locationContext } from "../../contexts/locationContext";
+import { classNames } from "../../utils";
 
 export default function ExtraSidebar() {
   const {

src/frontend/src/components/LightTooltipComponent/index.tsx

@@ -1,5 +1,5 @@
-import { styled } from "@mui/material/styles";
 import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
+import { styled } from "@mui/material/styles";
 
 export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />

src/frontend/src/components/LoadingSpinner/index.tsx

@@ -1,6 +1,3 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import { RadialProgressType } from "../../types/components";
-
 export default function LoadingSpinner({}) {
   return <></>;
 }

src/frontend/src/components/RadialProgress/index.tsx

@@ -1,4 +1,3 @@
-import { useContext, useEffect, useRef, useState } from "react";
 import { RadialProgressType } from "../../types/components";
 
 export default function RadialProgressComponent({

src/frontend/src/components/ShadTooltipComponent/index.tsx

@@ -1,4 +1,4 @@
-import { RadialProgressType, ShadToolTipType } from "../../types/components";
+import { ShadToolTipType } from "../../types/components";
 import {
   Tooltip,
   TooltipContent,
@@ -11,15 +11,20 @@ export default function ShadTooltip({
   side,
   asChild = true,
   children,
-  delayDuration,
+  style,
-  style
+  delayDuration = 500,
 }: ShadToolTipType) {
   return (
     <TooltipProvider>
       <Tooltip delayDuration={delayDuration}>
         <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
 
-        <TooltipContent className={style} side={side} avoidCollisions={false} sticky="always">
+        <TooltipContent
+          className={style}
+          side={side}
+          avoidCollisions={false}
+          sticky="always"
+        >
           {content}
         </TooltipContent>
       </Tooltip>

src/frontend/src/components/TooltipComponent/index.tsx

@@ -1,6 +1,5 @@
-import { ReactElement } from "react";
-import { LightTooltip } from "../LightTooltipComponent";
 import { TooltipComponentType } from "../../types/components";
+import { LightTooltip } from "../LightTooltipComponent";
 
 export default function Tooltip({
   children,

src/frontend/src/components/cardComponent/index.tsx

@@ -1,26 +1,15 @@
-import { Trash2, ExternalLink } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import { useContext } from "react";
-import { Link } from "react-router-dom";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow";
 import { gradients } from "../../utils";
 import {
-  CardTitle,
+  Card,
   CardDescription,
   CardFooter,
-  Card,
   CardHeader,
+  CardTitle,
 } from "../ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../ui/dialog";
-import { Button } from "@mui/material";
 
 export const CardComponent = ({
   flow,

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

@@ -1,16 +1,16 @@
-import { useContext, useState } from "react";
 import { Transition } from "@headlessui/react";
 import { Zap } from "lucide-react";
-import { validateNodes } from "../../../utils";
+import { useContext, useState } from "react";
-import { FlowType } from "../../../types/flow";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
-import { typesContext } from "../../../contexts/typesContext";
 import { alertContext } from "../../../contexts/alertContext";
+import { typesContext } from "../../../contexts/typesContext";
 import { postBuildInit } from "../../../controllers/API";
+import { FlowType } from "../../../types/flow";
+import { validateNodes } from "../../../utils";
 
-import RadialProgressComponent from "../../RadialProgress";
 import { TabsContext } from "../../../contexts/tabsContext";
+import RadialProgressComponent from "../../RadialProgress";
 
 export default function BuildTrigger({
   open,

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

@@ -1,7 +1,6 @@
 import { Transition } from "@headlessui/react";
 import { MessagesSquare } from "lucide-react";
 
-import { alertContext } from "../../../contexts/alertContext";
 import { useContext } from "react";
 import {
   CHAT_CANNOT_OPEN_DESCRIPTION,
@@ -9,6 +8,7 @@ import {
   FLOW_NOT_BUILT_DESCRIPTION,
   FLOW_NOT_BUILT_TITLE,
 } from "../../../constants";
+import { alertContext } from "../../../contexts/alertContext";
 
 export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
   const { setErrorData } = useContext(alertContext);

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

@@ -1,14 +1,14 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import { useNodes } from "reactflow";
 import { ChatType } from "../../types/chat";
-import ChatTrigger from "./chatTrigger";
 import BuildTrigger from "./buildTrigger";
+import ChatTrigger from "./chatTrigger";
 
-import { getBuildStatus } from "../../controllers/API";
-import { NodeType } from "../../types/flow";
-import FormModal from "../../modals/formModal";
-import { TabsContext } from "../../contexts/tabsContext";
 import * as _ from "lodash";
+import { TabsContext } from "../../contexts/tabsContext";
+import { getBuildStatus } from "../../controllers/API";
+import FormModal from "../../modals/formModal";
+import { NodeType } from "../../types/flow";
 
 export default function Chat({ flow }: ChatType) {
   const [open, setOpen] = useState(false);

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

@@ -1,7 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
-import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 
 import { ExternalLink } from "lucide-react";

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

@@ -1,9 +1,9 @@
 import { Listbox, Transition } from "@headlessui/react";
+import { Check, ChevronsUpDown } from "lucide-react";
 import { Fragment, useContext, useEffect, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
-import { ChevronsUpDown, Check } from "lucide-react";
-import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function Dropdown({
   value,

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

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react";
-import { FloatComponentType } from "../../types/components";
-import { TabsContext } from "../../contexts/tabsContext";
 import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
+import { FloatComponentType } from "../../types/components";
 
 export default function FloatComponent({
   value,

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

@@ -1,27 +1,25 @@
-import { useContext } from "react";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { PopUpContext } from "../../../../contexts/popUpContext";
 import {
-  Plus,
   ChevronDown,
   ChevronLeft,
-  Undo,
+  Plus,
   Redo,
   Settings2,
+  Undo,
 } from "lucide-react";
+import { useContext } from "react";
+import { PopUpContext } from "../../../../contexts/popUpContext";
+import { TabsContext } from "../../../../contexts/tabsContext";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "../../../ui/dropdown-menu";
 
-import { alertContext } from "../../../../contexts/alertContext";
 import { Link, useNavigate } from "react-router-dom";
+import { alertContext } from "../../../../contexts/alertContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import { Button } from "../../../ui/button";

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

@@ -1,19 +1,18 @@
-import { Home, MoonIcon, SunIcon, Users2 } from "lucide-react";
+import { Bell, Home, MoonIcon, SunIcon, Users2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
-import { Button } from "../ui/button";
+import { Link, useLocation, useParams } from "react-router-dom";
-import { TabsContext } from "../../contexts/tabsContext";
 import AlertDropdown from "../../alerts/alertDropDown";
+import { USER_PROJECTS_HEADER } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
-import MenuBar from "./components/menuBar";
-import { Link, useLocation, useParams } from "react-router-dom";
-import { USER_PROJECTS_HEADER } from "../../constants";
 import { getRepoStars } from "../../controllers/API";
+import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
-import { Bell } from "lucide-react";
+import MenuBar from "./components/menuBar";
 
 export default function Header() {
   const { flows, addFlow, tabId } = useContext(TabsContext);

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

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
-import { TabsContext } from "../../contexts/tabsContext";
-import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function InputComponent({
   value,

src/frontend/src/components/inputFileComponent/index.tsx

@@ -1,9 +1,9 @@
+import { FileSearch2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import { FileComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
-import { FileSearch2 } from "lucide-react";
 import { uploadFile } from "../../controllers/API";
+import { FileComponentType } from "../../types/components";
 
 export default function InputFileComponent({
   value,
@@ -91,7 +91,6 @@ export default function InputFileComponent({
     input.click();
   };
 
-
   return (
     <div className={disabled ? "input-component-div" : "w-full"}>
       <div className="input-file-component">

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

@@ -1,9 +1,8 @@
 import { useContext, useEffect, useState } from "react";
 import { InputListComponentType } from "../../types/components";
-import { TabsContext } from "../../contexts/tabsContext";
 
 import _ from "lodash";
-import { X, Plus } from "lucide-react";
+import { Plus, X } from "lucide-react";
 import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function InputListComponent({

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

@@ -1,8 +1,7 @@
 import { useContext, useEffect, useState } from "react";
-import { FloatComponentType } from "../../types/components";
-import { TabsContext } from "../../contexts/tabsContext";
-import { classNames } from "../../utils";
 import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
+import { FloatComponentType } from "../../types/components";
 
 export default function IntComponent({
   value,

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

@@ -1,13 +1,13 @@
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
+import { TextAreaComponentType } from "../../types/components";
 import { TypeModal } from "../../utils";
 
-import { ExternalLink } from "lucide-react";
-import { postValidatePrompt } from "../../controllers/API";
-import { typesContext } from "../../contexts/typesContext";
 import * as _ from "lodash";
+import { ExternalLink } from "lucide-react";
+import { typesContext } from "../../contexts/typesContext";
+import { postValidatePrompt } from "../../controllers/API";
 
 export default function PromptAreaComponent({
   field_name,

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

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
-import { TypeModal, classNames } from "../../utils";
+import { TextAreaComponentType } from "../../types/components";
+import { TypeModal } from "../../utils";
 
 import { ExternalLink } from "lucide-react";
 

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

@@ -1,7 +1,7 @@
 import { Switch } from "@headlessui/react";
-import { classNames } from "../../utils";
 import { useEffect } from "react";
 import { ToggleComponentType } from "../../types/components";
+import { classNames } from "../../utils";
 
 export default function ToggleComponent({
   enabled,

src/frontend/src/components/toggleShadComponent/index.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { ToggleComponentType } from "../../types/components";
 import { Switch } from "../ui/switch";
 

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

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const Accordion = AccordionPrimitive.Root;

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

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const badgeVariants = cva(

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

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const buttonVariants = cva(

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

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const Checkbox = React.forwardRef<

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

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const Dialog = DialogPrimitive.Root;

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

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;

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

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const labelVariants = cva(

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

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "../../utils";
 

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

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const Progress = React.forwardRef<

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils";
 
 export default function RenameLabel(props) {

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

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const Separator = React.forwardRef<

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

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const Switch = React.forwardRef<

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

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const Tabs = TabsPrimitive.Root;

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

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
 import { cn } from "../../utils";
 
 const TooltipProvider = TooltipPrimitive.Provider;

src/frontend/src/constants.tsx

@@ -1,10 +1,9 @@
 // src/constants.tsx
 
-import { MessageSquareDashed } from "lucide-react";
+import { MessageSquare } from "lucide-react";
 import { FlowType } from "./types/flow";
 import { TabsState } from "./types/tabs";
 import { buildInputs, buildTweaks } from "./utils";
-import { MessageSquare } from "lucide-react";
 
 /**
  * The base text for subtitle of Export Dialog (Toolbar)

src/frontend/src/contexts/SSEContext.tsx

@@ -1,10 +1,4 @@
-import {
+import { createContext, useCallback, useContext, useState } from "react";
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-} from "react";
 
 const initialValue = {
   updateSSEData: ({}) => {},

src/frontend/src/contexts/index.tsx

@@ -1,13 +1,13 @@
 import { ReactNode } from "react";
+import { ReactFlowProvider } from "reactflow";
+import { SSEProvider } from "./SSEContext";
 import { AlertProvider } from "./alertContext";
 import { DarkProvider } from "./darkContext";
 import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
 import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
-import { ReactFlowProvider } from "reactflow";
 import { UndoRedoProvider } from "./undoRedoContext";
-import { SSEProvider } from "./SSEContext";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
   //element to wrap all context

src/frontend/src/contexts/popUpContext.tsx

@@ -1,5 +1,4 @@
-import { createContext } from "react";
+import React, { createContext, useState } from "react";
-import React, { useState } from "react";
 
 // context to set JSX element on the DOM
 export const PopUpContext = createContext({

src/frontend/src/contexts/tabsContext.tsx

@@ -1,33 +1,33 @@
+import _ from "lodash";
 import {
-  createContext,
-  useEffect,
-  useState,
-  useRef,
   ReactNode,
+  createContext,
   useContext,
+  useEffect,
+  useRef,
+  useState,
 } from "react";
+import { addEdge } from "reactflow";
+import ShortUniqueId from "short-unique-id";
+import {
+  deleteFlowFromDatabase,
+  downloadFlowsFromDatabase,
+  readFlowsFromDatabase,
+  saveFlowToDatabase,
+  updateFlowInDatabase,
+  uploadFlowsToDatabase,
+} from "../controllers/API";
+import { APIClassType, APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
 import { TabsContextType, TabsState } from "../types/tabs";
 import {
-  updateIds,
-  updateTemplate,
   getRandomDescription,
   getRandomName,
+  updateIds,
+  updateTemplate,
 } from "../utils";
 import { alertContext } from "./alertContext";
 import { typesContext } from "./typesContext";
-import { APIClassType, APITemplateType } from "../types/api";
-import ShortUniqueId from "short-unique-id";
-import { addEdge } from "reactflow";
-import {
-  readFlowsFromDatabase,
-  deleteFlowFromDatabase,
-  saveFlowToDatabase,
-  downloadFlowsFromDatabase,
-  uploadFlowsToDatabase,
-  updateFlowInDatabase,
-} from "../controllers/API";
-import _ from "lodash";
 
 const uid = new ShortUniqueId({ length: 5 });
 

src/frontend/src/contexts/typesContext.tsx

@@ -1,8 +1,8 @@
 import { createContext, ReactNode, useEffect, useState } from "react";
 import { Node } from "reactflow";
-import { typesContextType } from "../types/typesContext";
 import { getAll } from "../controllers/API";
 import { APIKindType } from "../types/api";
+import { typesContextType } from "../types/typesContext";
 
 //context to share types adn functions from nodes to flow
 

src/frontend/src/contexts/undoRedoContext.tsx

@@ -1,3 +1,4 @@
+import { cloneDeep } from "lodash";
 import {
   createContext,
   useCallback,
@@ -6,7 +7,6 @@ import {
   useState,
 } from "react";
 import { Edge, Node, useReactFlow } from "reactflow";
-import { cloneDeep } from "lodash";
 import { TabsContext } from "./tabsContext";
 
 type undoRedoContextType = {

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

@@ -1,15 +1,15 @@
-import {
-  BuildStatusTypeAPI,
-  errorsTypeAPI,
-  InitTypeAPI,
-  UploadFileTypeAPI,
-  APIClassType,
-  PromptTypeAPI,
-} from "./../../types/api/index";
-import { APIObjectType, sendAllProps } from "../../types/api/index";
 import axios, { AxiosResponse } from "axios";
-import { FlowStyleType, FlowType } from "../../types/flow";
 import { ReactFlowJsonObject } from "reactflow";
+import { APIObjectType, sendAllProps } from "../../types/api/index";
+import { FlowStyleType, FlowType } from "../../types/flow";
+import {
+  APIClassType,
+  BuildStatusTypeAPI,
+  InitTypeAPI,
+  PromptTypeAPI,
+  UploadFileTypeAPI,
+  errorsTypeAPI,
+} from "./../../types/api/index";
 
 /**
  * Fetches all objects from the API endpoint.

src/frontend/src/index.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
+import App from "./App";
 import ContextWrapper from "./contexts";
+import reportWebVitals from "./reportWebVitals";
 
 import "./index.css";
 

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

@@ -1,42 +1,15 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import "ace-builds/src-noconflict/ext-language_tools";
-import { PopUpContext } from "../../contexts/popUpContext";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import "ace-builds/src-noconflict/ext-language_tools";
+import { useContext, useEffect, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
 // import "ace-builds/webpack-resolver";
-import { darkContext } from "../../contexts/darkContext";
+import { Check, Clipboard, Code2 } from "lucide-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
-import { FlowType } from "../../types/flow/index";
-import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
-import { EXPORT_CODE_DIALOG } from "../../constants";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../components/ui/tabs";
-import { Check, Clipboard, Code2 } from "lucide-react";
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import { buildTweaks, classNames, limitScrollFieldsModal } from "../../utils";
 import AccordionComponent from "../../components/AccordionComponent";
+import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
@@ -47,9 +20,38 @@ import IntComponent from "../../components/intComponent";
 import PromptAreaComponent from "../../components/promptComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
+import {
-import { cloneDeep, filter } from "lodash";
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import {
+  EXPORT_CODE_DIALOG,
+  getCurlCode,
+  getPythonApiCode,
+  getPythonCode,
+} from "../../constants";
+import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import { FlowType } from "../../types/flow/index";
+import { buildTweaks, classNames } from "../../utils";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -420,7 +422,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                     ) : t.data.node.template[n]
                                                         .multiline ? (
                                                       <ShadTooltip
-                                                        delayDuration={1000}
                                                         content={buildContent(
                                                           t.data.node.template[
                                                             n
@@ -508,7 +509,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "file" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -624,7 +624,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "prompt" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -661,7 +660,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                 ) : t.data.node.template[n]
                                                     .type === "code" ? (
                                                   <ShadTooltip
-                                                    delayDuration={1000}
                                                     content={buildContent(
                                                       getValue(
                                                         t.data.node.template[n]
@@ -722,7 +720,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                         </div>
                       ))}
 
-                      {/* 
+                      {/*
                       <div className="flex flex-col gap-5 bg-muted">
                         <Table className="table-fixed bg-muted outline-1">
                           <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">

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

@@ -1,26 +1,17 @@
+import { Variable } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { NodeDataType } from "../../types/flow";
-import { classNames, limitScrollFieldsModal } from "../../utils";
-import { typesContext } from "../../contexts/typesContext";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import ToggleShadComponent from "../../components/toggleShadComponent";
-import InputListComponent from "../../components/inputListComponent";
-import TextAreaComponent from "../../components/textAreaComponent";
-import InputComponent from "../../components/inputComponent";
-import FloatComponent from "../../components/floatComponent";
-import Dropdown from "../../components/dropdownComponent";
-import IntComponent from "../../components/intComponent";
-import InputFileComponent from "../../components/inputFileComponent";
-import PromptAreaComponent from "../../components/promptComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
+import Dropdown from "../../components/dropdownComponent";
+import FloatComponent from "../../components/floatComponent";
+import InputComponent from "../../components/inputComponent";
+import InputFileComponent from "../../components/inputFileComponent";
+import InputListComponent from "../../components/inputListComponent";
+import IntComponent from "../../components/intComponent";
+import PromptAreaComponent from "../../components/promptComponent";
+import TextAreaComponent from "../../components/textAreaComponent";
+import ToggleShadComponent from "../../components/toggleShadComponent";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -30,10 +21,19 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
-import { Badge } from "../../components/ui/badge";
-import { Variable } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { typesContext } from "../../contexts/typesContext";
+import { NodeDataType } from "../../types/flow";
+import { classNames, limitScrollFieldsModal } from "../../utils";
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);

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

@@ -1,14 +1,14 @@
 import { useState } from "react";
-import InputListComponent from "../../../../components/inputListComponent";
-import Dropdown from "../../../../components/dropdownComponent";
-import TextAreaComponent from "../../../../components/textAreaComponent";
-import InputComponent from "../../../../components/inputComponent";
-import ToggleComponent from "../../../../components/toggleComponent";
-import FloatComponent from "../../../../components/floatComponent";
-import IntComponent from "../../../../components/intComponent";
-import InputFileComponent from "../../../../components/inputFileComponent";
-import PromptAreaComponent from "../../../../components/promptComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import Dropdown from "../../../../components/dropdownComponent";
+import FloatComponent from "../../../../components/floatComponent";
+import InputComponent from "../../../../components/inputComponent";
+import InputFileComponent from "../../../../components/inputFileComponent";
+import InputListComponent from "../../../../components/inputListComponent";
+import IntComponent from "../../../../components/intComponent";
+import PromptAreaComponent from "../../../../components/promptComponent";
+import TextAreaComponent from "../../../../components/textAreaComponent";
+import ToggleComponent from "../../../../components/toggleComponent";
 import { classNames } from "../../../../utils";
 
 export default function ModalField({

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

@@ -1,6 +1,8 @@
 import { Dialog, Transition } from "@headlessui/react";
+import { X } from "lucide-react";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
+import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import {
   classNames,
@@ -9,9 +11,7 @@ import {
   nodeIconsLucide,
   toTitleCase,
 } from "../../utils";
-import { typesContext } from "../../contexts/typesContext";
 import ModalField from "./components/ModalField";
-import { X } from "lucide-react";
 
 export default function NodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);

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

@@ -1,17 +1,17 @@
+import Convert from "ansi-to-html";
+import DOMPurify from "dompurify";
+import { MessageCircle, User2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { ChatMessageType } from "../../../types/chat";
-import { classNames } from "../../../utils";
-import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
-import AiIconStill from "../../../assets/froze-flow.png";
-import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
+import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
+import AiIconStill from "../../../assets/froze-flow.png";
+import { ChatMessageType } from "../../../types/chat";
+import { classNames } from "../../../utils";
+import FileCard from "../fileComponent";
 import { CodeBlock } from "./codeBlock";
-import Convert from "ansi-to-html";
-import { User2, MessageCircle } from "lucide-react";
-import DOMPurify from "dompurify";
 export default function ChatMessage({
   chat,
   lockChat,

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

@@ -1,14 +1,14 @@
 import { Dialog, Transition } from "@headlessui/react";
+import { Eraser, MessagesSquare, X } from "lucide-react";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
-import { FlowType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
-import { validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
-import ChatMessage from "./chatMessage";
-import { X, MessagesSquare, Eraser } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
+import { FlowType } from "../../types/flow";
+import { validateNodes } from "../../utils";
 import ChatInput from "./chatInput";
+import ChatMessage from "./chatMessage";
 
 import _ from "lodash";
 import { getHealth } from "../../controllers/API";

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

@@ -1,14 +1,14 @@
+// organize-imports-ignore
 import { useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import "ace-builds/src-noconflict/ext-language_tools";
 // import "ace-builds/webpack-resolver";
-import { darkContext } from "../../contexts/darkContext";
+import { TerminalSquare } from "lucide-react";
-import { postValidateCode } from "../../controllers/API";
+import { Button } from "../../components/ui/button";
-import { alertContext } from "../../contexts/alertContext";
 import {
   Dialog,
   DialogContent,
@@ -18,9 +18,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
-import { TerminalSquare } from "lucide-react";
+import { alertContext } from "../../contexts/alertContext";
+import { darkContext } from "../../contexts/darkContext";
+import { postValidateCode } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 
 export default function CodeAreaModal({

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

@@ -1,8 +1,8 @@
+import { Download } from "lucide-react";
 import { useContext, useRef, useState } from "react";
-import { alertContext } from "../../contexts/alertContext";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
-import { PopUpContext } from "../../contexts/popUpContext";
+import { Button } from "../../components/ui/button";
-import { TabsContext } from "../../contexts/tabsContext";
+import { Checkbox } from "../../components/ui/checkbox";
-import { removeApiKeys } from "../../utils";
 import {
   Dialog,
   DialogContent,
@@ -12,11 +12,11 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
-import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
-import { Download } from "lucide-react";
+import { alertContext } from "../../contexts/alertContext";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
+import { removeApiKeys } from "../../utils";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);

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

@@ -1,7 +1,7 @@
+import { Settings2 } from "lucide-react";
 import { useContext, useRef, useState } from "react";
-import { alertContext } from "../../contexts/alertContext";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
-import { PopUpContext } from "../../contexts/popUpContext";
+import { Button } from "../../components/ui/button";
-import { TabsContext } from "../../contexts/tabsContext";
 import {
   Dialog,
   DialogContent,
@@ -11,11 +11,10 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
-import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import { alertContext } from "../../contexts/alertContext";
-import { Settings2 } from "lucide-react";
+import { PopUpContext } from "../../contexts/popUpContext";
-import { updateFlowInDatabase } from "../../controllers/API";
+import { TabsContext } from "../../contexts/tabsContext";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);

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

@@ -1,7 +1,6 @@
+import { Lock, LucideSend } from "lucide-react";
+import { useEffect } from "react";
 import { classNames } from "../../../utils";
-import { useContext, useEffect, useRef, useState } from "react";
-import { TabsContext } from "../../../contexts/tabsContext";
-import { Eraser, Lock, LucideSend } from "lucide-react";
 
 export default function ChatInput({
   lockChat,

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

@@ -1,32 +1,17 @@
-import { useEffect, useRef, useState } from "react";
+import Convert from "ansi-to-html";
-import { ChatMessageType } from "../../../types/chat";
+import { ChevronDown } from "lucide-react";
-import { classNames } from "../../../utils";
+import { useState } from "react";
-import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
-import AiIconStill from "../../../assets/froze-flow.png";
-import Robot from "../../../assets/robot.png";
-import MaleTechnology from "../../../assets/male-technologist.png";
-import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
-import { CodeBlock } from "./codeBlock";
+import MaleTechnology from "../../../assets/male-technologist.png";
-import Convert from "ansi-to-html";
+import Robot from "../../../assets/robot.png";
-import {
-  User2,
-  MessageSquare,
-  ChevronDown,
-  MessageCircle,
-  MessageSquareDashed,
-} from "lucide-react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../../components/ui/accordion";
-import { Badge } from "../../../components/ui/badge";
 import { THOUGHTS_ICON } from "../../../constants";
+import { ChatMessageType } from "../../../types/chat";
+import { classNames } from "../../../utils";
+import FileCard from "../fileComponent";
+import { CodeBlock } from "./codeBlock";
 
 export default function ChatMessage({
   chat,

src/frontend/src/modals/formModal/fileComponent/index.tsx

@@ -1,6 +1,6 @@
 import * as base64js from "base64-js";
-import { useState } from "react";
 import { DownloadCloud, File } from "lucide-react";
+import { useState } from "react";
 
 export default function FileCard({ fileName, content, fileType }) {
   const handleDownload = () => {

src/frontend/src/modals/formModal/index.tsx

@@ -1,15 +1,23 @@
+import { Eraser, TerminalSquare, Variable } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
-import { FlowType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
-import { classNames, validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
-import ChatMessage from "./chatMessage";
-import { TerminalSquare, MessageSquare, Variable, Eraser } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
+import { FlowType } from "../../types/flow";
+import { classNames, validateNodes } from "../../utils";
 import ChatInput from "./chatInput";
+import ChatMessage from "./chatMessage";
 
 import _ from "lodash";
+import ToggleShadComponent from "../../components/toggleShadComponent";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../components/ui/accordion";
+import { Badge } from "../../components/ui/badge";
 import {
   Dialog,
   DialogContent,
@@ -18,17 +26,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
+import { Textarea } from "../../components/ui/textarea";
 import { CHAT_FORM_DIALOG_SUBTITLE, THOUGHTS_ICON } from "../../constants";
 import { TabsContext } from "../../contexts/tabsContext";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../components/ui/accordion";
-import { Textarea } from "../../components/ui/textarea";
-import { Badge } from "../../components/ui/badge";
-import ToggleShadComponent from "../../components/toggleShadComponent";
 
 export default function FormModal({
   flow,

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

@@ -1,8 +1,9 @@
-import { useContext, useRef, useState, useEffect } from "react";
+import DOMPurify from "dompurify";
-import { PopUpContext } from "../../contexts/popUpContext";
+import { FileText, Variable } from "lucide-react";
-import { darkContext } from "../../contexts/darkContext";
+import { useContext, useEffect, useRef, useState } from "react";
-import { postValidatePrompt } from "../../controllers/API";
+import ShadTooltip from "../../components/ShadTooltipComponent";
-import { alertContext } from "../../contexts/alertContext";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -12,14 +13,16 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../components/ui/dialog";
-import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import {
   HIGHLIGH_CSS,
   PROMPT_DIALOG_SUBTITLE,
   TEXT_DIALOG_SUBTITLE,
 } from "../../constants";
-import { FileText } from "lucide-react";
+import { alertContext } from "../../contexts/alertContext";
+import { darkContext } from "../../contexts/darkContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { postValidatePrompt } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 import {
   INVALID_CHARACTERS,
@@ -29,10 +32,6 @@ import {
   regexHighlight,
   varHighlightHTML,
 } from "../../utils";
-import { Badge } from "../../components/ui/badge";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import DOMPurify from "dompurify";
-import { Variable } from "lucide-react";
 
 export default function GenericModal({
   field_name = "",
@@ -238,39 +237,38 @@ export default function GenericModal({
 
         {type == TypeModal.PROMPT && (
           <>
-          <div className="h-[60px] overflow-y-auto custom-scroll sm:6/6 mt-3 mr-28">
+            <div className="sm:6/6 mr-28 mt-3 h-[60px] overflow-y-auto custom-scroll">
-            <div className="flex flex-wrap items-center">
+              <div className="flex flex-wrap items-center">
-              <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-              <span className="text-md font-semibold text-primary">
+                <span className="text-md font-semibold text-primary">
-                Input Variables:
+                  Input Variables:
-              </span>
+                </span>
 
-              {wordsHighlight.map((word, index) => (
+                {wordsHighlight.map((word, index) => (
-                <ShadTooltip
+                  <ShadTooltip
-                  key={getRandomKeyByssmm() + index}
+                    key={getRandomKeyByssmm() + index}
-                  content={word.replace(/[{}]/g, "")}
+                    content={word.replace(/[{}]/g, "")}
-                  asChild={false}
+                    asChild={false}
-                  delayDuration={1500}
-                >
-                  <Badge
-                    key={index}
-                    variant="gray"
-                    size="md"
-                    className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
                   >
-                    <div className="relative bottom-[1px]">
+                    <Badge
-                      <span>
+                      key={index}
-                        {word.replace(/[{}]/g, "").length > 59
+                      variant="gray"
-                          ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                      size="md"
-                          : word.replace(/[{}]/g, "")}
+                      className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
-                      </span>
+                    >
-                    </div>
+                      <div className="relative bottom-[1px]">
-                  </Badge>
+                        <span>
-                </ShadTooltip>
+                          {word.replace(/[{}]/g, "").length > 59
-              ))}
+                            ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                            : word.replace(/[{}]/g, "")}
+                        </span>
+                      </div>
+                    </Badge>
+                  </ShadTooltip>
+                ))}
+              </div>
             </div>
-          </div>
+          </>
-        </>
         )}
 
         <DialogFooter>

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { classNames } from "../../../utils";
 
 export default function ButtonBox({

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

@@ -1,18 +1,11 @@
 import {
-  DocumentDuplicateIcon,
-  ComputerDesktopIcon,
-  ArrowUpTrayIcon,
   ArrowLeftIcon,
+  ArrowUpTrayIcon,
+  ComputerDesktopIcon,
+  DocumentDuplicateIcon,
 } from "@heroicons/react/24/outline";
 import { useContext, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { TabsContext } from "../../contexts/tabsContext";
-import ButtonBox from "./buttonBox";
-import { getExamples } from "../../controllers/API";
-import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
-import { FlowType } from "../../types/flow";
-import { classNames } from "../../utils";
 import {
   Dialog,
   DialogContent,
@@ -23,6 +16,13 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
+import { alertContext } from "../../contexts/alertContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { TabsContext } from "../../contexts/tabsContext";
+import { getExamples } from "../../controllers/API";
+import { FlowType } from "../../types/flow";
+import { classNames } from "../../utils";
+import ButtonBox from "./buttonBox";
 
 export default function ImportModal() {
   const [open, setOpen] = useState(true);

src/frontend/src/modals/promptModal/index.tsx

@@ -1,10 +1,10 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
+import { DocumentTextIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { darkContext } from "../../contexts/darkContext";
-import { checkPrompt } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
+import { darkContext } from "../../contexts/darkContext";
+import { PopUpContext } from "../../contexts/popUpContext";
+import { checkPrompt } from "../../controllers/API";
 export default function PromptAreaModal({
   value,
   setValue,

src/frontend/src/modals/textAreaModal/index.tsx

@@ -1,7 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
 import {
-  XMarkIcon,
   ClipboardDocumentListIcon,
+  XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";

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

@@ -1,13 +1,13 @@
+import { GitFork, GithubIcon, Users2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
-import { GithubIcon, Users2, GitFork } from "lucide-react";
-import { TabsContext } from "../../contexts/tabsContext";
-import { alertContext } from "../../contexts/alertContext";
 import { Button } from "../../components/ui/button";
+import { alertContext } from "../../contexts/alertContext";
+import { TabsContext } from "../../contexts/tabsContext";
 
+import { useNavigate } from "react-router-dom";
+import { CardComponent } from "../../components/cardComponent";
 import { getExamples } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
-import { CardComponent } from "../../components/cardComponent";
-import { useNavigate } from "react-router-dom";
 export default function CommunityPage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
     useContext(TabsContext);

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

@@ -1,6 +1,6 @@
 import { Disclosure } from "@headlessui/react";
-import { DisclosureComponentType } from "../../../../types/components";
 import { ChevronRight } from "lucide-react";
+import { DisclosureComponentType } from "../../../../types/components";
 
 export default function DisclosureComponent({
   button: { title, Icon, buttons = [] },

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

@@ -1,21 +1,21 @@
-import _, { set } from "lodash";
+import _ from "lodash";
-import { useContext, useRef, useState, useEffect, useCallback } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import ReactFlow, {
-  OnSelectionChangeParams,
-  useNodesState,
-  useEdgesState,
-  useReactFlow,
-  EdgeChange,
-  Connection,
-  addEdge,
-  NodeDragHandler,
-  SelectionDragHandler,
-  OnEdgesDelete,
-  Edge,
-  updateEdge,
   Background,
+  Connection,
   Controls,
+  Edge,
+  EdgeChange,
   NodeChange,
+  NodeDragHandler,
+  OnEdgesDelete,
+  OnSelectionChangeParams,
+  SelectionDragHandler,
+  addEdge,
+  updateEdge,
+  useEdgesState,
+  useNodesState,
+  useReactFlow,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
@@ -23,12 +23,12 @@ import { alertContext } from "../../../../contexts/alertContext";
 import { locationContext } from "../../../../contexts/locationContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
+import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType } from "../../../../types/flow";
 import { isValidConnection } from "../../../../utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import ExtraSidebar from "../extraSidebarComponent";
-import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 
 const nodeTypes = {
   genericNode: GenericNode,

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

@@ -1,22 +1,21 @@
-import DisclosureComponent from "../DisclosureComponent";
+import { Code2, FileDown, FileUp, Menu, Save, Search } from "lucide-react";
+import { useContext, useState } from "react";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { Separator } from "../../../../components/ui/separator";
+import { alertContext } from "../../../../contexts/alertContext";
+import { PopUpContext } from "../../../../contexts/popUpContext";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { typesContext } from "../../../../contexts/typesContext";
+import ApiModal from "../../../../modals/ApiModal";
+import ExportModal from "../../../../modals/exportModal";
+import { APIClassType, APIObjectType } from "../../../../types/api";
 import {
   classNames,
   nodeColors,
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils";
-import { useContext, useState } from "react";
+import DisclosureComponent from "../DisclosureComponent";
-import { typesContext } from "../../../../contexts/typesContext";
-import { APIClassType, APIObjectType } from "../../../../types/api";
-import ShadTooltip from "../../../../components/ShadTooltipComponent";
-import { Code2, FileDown, FileUp, Save, Search } from "lucide-react";
-import { PopUpContext } from "../../../../contexts/popUpContext";
-import ExportModal from "../../../../modals/exportModal";
-import ApiModal from "../../../../modals/ApiModal";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { alertContext } from "../../../../contexts/alertContext";
-import { Separator } from "../../../../components/ui/separator";
-import { Menu } from "lucide-react";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);

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

@@ -1,10 +1,10 @@
+import { Copy, FileText, Settings2, Trash2 } from "lucide-react";
 import { useContext, useState } from "react";
-import { Settings2, Copy, Trash2, FileText } from "lucide-react";
-import { classNames } from "../../../../utils";
-import { TabsContext } from "../../../../contexts/tabsContext";
 import { useReactFlow } from "reactflow";
-import EditNodeModal from "../../../../modals/EditNodeModal";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import EditNodeModal from "../../../../modals/EditNodeModal";
+import { classNames } from "../../../../utils";
 
 const NodeToolbarComponent = (props) => {
   const [nodeLength, setNodeLength] = useState(

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

@@ -1,8 +1,8 @@
 import { useContext, useEffect, useState } from "react";
-import Page from "./components/PageComponent";
-import { TabsContext } from "../../contexts/tabsContext";
 import { useParams } from "react-router-dom";
+import { TabsContext } from "../../contexts/tabsContext";
 import { getVersion } from "../../controllers/API";
+import Page from "./components/PageComponent";
 
 export default function FlowPage() {
   const { flows, tabId, setTabId } = useContext(TabsContext);

src/frontend/src/pages/MainPage/index.tsx

@@ -1,10 +1,10 @@
+import { Download, ExternalLink, Home, Plus, Upload } from "lucide-react";
 import { useContext, useEffect } from "react";
-import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
-import { TabsContext } from "../../contexts/tabsContext";
-import { Button } from "../../components/ui/button";
 import { Link, useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
+import { Button } from "../../components/ui/button";
 import { USER_PROJECTS_HEADER } from "../../constants";
+import { TabsContext } from "../../contexts/tabsContext";
 export default function HomePage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);

src/frontend/src/prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  // ...
+  organizeImportsSkipDestructiveCodeActions: true,
+};

src/frontend/src/routes.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes } from "react-router-dom";
-import HomePage from "./pages/MainPage";
-import FlowPage from "./pages/FlowPage";
 import CommunityPage from "./pages/CommunityPage";
+import FlowPage from "./pages/FlowPage";
+import HomePage from "./pages/MainPage";
 
 const Router = () => {
   return (

src/frontend/src/types/api/index.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, Viewport } from "reactflow";
+import { Edge, Node, Viewport } from "reactflow";
 //kind and class are just representative names to represent the actual structure of the object received by the API
 
 export type APIObjectType = { kind: APIKindType; [key: string]: APIKindType };

src/frontend/src/types/components/index.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from "react";
+import { APIClassType } from "../api";
 import { NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
-import { APIClassType } from "../api";
 export type InputComponentType = {
   value: string;
   disabled?: boolean;

src/frontend/src/types/flow/index.ts

@@ -1,6 +1,5 @@
-import { ChatMessageType } from "./../chat/index";
-import { APIClassType } from "../api/index";
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
+import { APIClassType } from "../api/index";
 
 export type FlowType = {
   name: string;

src/frontend/src/utils.ts

@@ -1,34 +1,9 @@
-import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
-import { FlowType, NodeType } from "./types/flow";
-import { APITemplateType } from "./types/api";
-import _ from "lodash";
-import { ChromaIcon } from "./icons/ChromaIcon";
-import { AnthropicIcon } from "./icons/Anthropic";
-import { AirbyteIcon } from "./icons/Airbyte";
-import { BingIcon } from "./icons/Bing";
-import { CohereIcon } from "./icons/Cohere";
-import { EvernoteIcon } from "./icons/Evernote";
-import { FBIcon } from "./icons/FacebookMessenger";
-import { GitBookIcon } from "./icons/GitBook";
-import { GoogleIcon } from "./icons/Google";
-import { HackerNewsIcon } from "./icons/hackerNews";
-import { HugginFaceIcon } from "./icons/HuggingFace";
-import { IFixIcon } from "./icons/IFixIt";
-import { MetaIcon } from "./icons/Meta";
-import { MidjourneyIcon } from "./icons/Midjorney";
-import { NotionIcon } from "./icons/Notion";
-import { OpenAiIcon } from "./icons/OpenAi";
-import { QDrantIcon } from "./icons/QDrant";
-import { SearxIcon } from "./icons/Searx";
-import { SlackIcon } from "./icons/Slack";
-import { PineconeIcon } from "./icons/Pinecone";
 import clsx, { ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import _ from "lodash";
-import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./flow_constants";
-import { ComponentType, SVGProps } from "react";
 import {
   Compass,
   Cpu,
+  FileSearch,
   Fingerprint,
   Gift,
   Hammer,
@@ -41,15 +16,40 @@ import {
   Paperclip,
   Rocket,
   Scissors,
-  FileSearch,
   TerminalSquare,
   Wand2,
   Wrench,
 } from "lucide-react";
-import { SupabaseIcon } from "./icons/supabase";
+import { ComponentType, SVGProps } from "react";
+import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
+import { twMerge } from "tailwind-merge";
+import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./flow_constants";
+import { AirbyteIcon } from "./icons/Airbyte";
+import { AnthropicIcon } from "./icons/Anthropic";
+import { BingIcon } from "./icons/Bing";
+import { ChromaIcon } from "./icons/ChromaIcon";
+import { CohereIcon } from "./icons/Cohere";
+import { EvernoteIcon } from "./icons/Evernote";
+import { FBIcon } from "./icons/FacebookMessenger";
+import { GitBookIcon } from "./icons/GitBook";
+import { GoogleIcon } from "./icons/Google";
+import { HugginFaceIcon } from "./icons/HuggingFace";
+import { IFixIcon } from "./icons/IFixIt";
+import { MetaIcon } from "./icons/Meta";
+import { MidjourneyIcon } from "./icons/Midjorney";
 import { MongoDBIcon } from "./icons/MongoDB";
+import { NotionIcon } from "./icons/Notion";
+import { OpenAiIcon } from "./icons/OpenAi";
+import { PineconeIcon } from "./icons/Pinecone";
+import { QDrantIcon } from "./icons/QDrant";
+import { SearxIcon } from "./icons/Searx";
+import { SlackIcon } from "./icons/Slack";
 import { VertexAIIcon } from "./icons/VertexAI";
+import { HackerNewsIcon } from "./icons/hackerNews";
+import { SupabaseIcon } from "./icons/supabase";
+import { APITemplateType } from "./types/api";
 import { IVarHighlightType } from "./types/components";
+import { FlowType, NodeType } from "./types/flow";
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");

src/frontend/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
 import svgr from "vite-plugin-svgr";
 const apiRoutes = ["^/api/v1/", "/health"];
 

tests/test_agents_template.py

@@ -16,30 +16,94 @@ def test_zero_shot_agent(client: TestClient):
     }
     template = zero_shot_agent["template"]
 
-    assert template["llm_chain"] == {
+    assert template["tools"] == {
         "required": True,
         "placeholder": "",
         "show": True,
         "multiline": False,
         "password": False,
-        "name": "llm_chain",
+        "name": "tools",
-        "type": "LLMChain",
+        "type": "BaseTool",
+        "list": True,
+        "advanced": False,
+        "info": "",
+    }
+
+    # Additional assertions for other template variables
+    assert template["callback_manager"] == {
+        "required": False,
+        "placeholder": "",
+        "show": False,
+        "multiline": False,
+        "password": False,
+        "name": "callback_manager",
+        "type": "BaseCallbackManager",
         "list": False,
         "advanced": False,
         "info": "",
     }
-    assert template["allowed_tools"] == {
+    assert template["llm"] == {
-        "required": False,
+        "required": True,
         "placeholder": "",
         "show": True,
         "multiline": False,
         "password": False,
-        "name": "allowed_tools",
+        "name": "llm",
-        "type": "Tool",
+        "type": "BaseLanguageModel",
+        "list": False,
+        "advanced": False,
+        "info": "",
+    }
+    assert template["output_parser"] == {
+        "required": False,
+        "placeholder": "",
+        "show": False,
+        "multiline": False,
+        "password": False,
+        "name": "output_parser",
+        "type": "AgentOutputParser",
+        "list": False,
+        "advanced": False,
+        "info": "",
+    }
+    assert template["input_variables"] == {
+        "required": False,
+        "placeholder": "",
+        "show": False,
+        "multiline": False,
+        "password": False,
+        "name": "input_variables",
+        "type": "str",
         "list": True,
         "advanced": False,
         "info": "",
     }
+    assert template["prefix"] == {
+        "required": False,
+        "placeholder": "",
+        "show": True,
+        "multiline": True,
+        "value": "Answer the following questions as best you can. You have access to the following tools:",
+        "password": False,
+        "name": "prefix",
+        "type": "str",
+        "list": False,
+        "advanced": False,
+        "info": "",
+    }
+    assert template["suffix"] == {
+        "required": False,
+        "placeholder": "",
+        "show": True,
+        "multiline": True,
+        "value": "Begin!\n\nQuestion: {input}\nThought:{agent_scratchpad}",
+        "password": False,
+        "name": "suffix",
+        "type": "str",
+        "list": False,
+        "advanced": False,
+        "info": "",
+    }
 
 
 def test_json_agent(client: TestClient):

tests/test_endpoints.py

@@ -1,6 +1,86 @@
 import pytest
 from fastapi.testclient import TestClient
 from langflow.interface.tools.constants import CUSTOM_TOOLS
+from langflow.template.frontend_node.chains import TimeTravelGuideChainNode
+
+
+PROMPT_REQUEST = {
+    "name": "string",
+    "template": "string",
+    "frontend_node": {
+        "template": {},
+        "description": "string",
+        "base_classes": ["string"],
+        "name": "",
+        "display_name": "",
+        "documentation": "",
+        "custom_fields": {},
+        "output_types": [],
+        "field_formatters": {
+            "formatters": {"openai_api_key": {}},
+            "base_formatters": {
+                "kwargs": {},
+                "optional": {},
+                "list": {},
+                "dict": {},
+                "union": {},
+                "multiline": {},
+                "show": {},
+                "password": {},
+                "default": {},
+                "headers": {},
+                "dict_code_file": {},
+                "model_fields": {
+                    "MODEL_DICT": {
+                        "OpenAI": [
+                            "text-davinci-003",
+                            "text-davinci-002",
+                            "text-curie-001",
+                            "text-babbage-001",
+                            "text-ada-001",
+                        ],
+                        "ChatOpenAI": [
+                            "gpt-3.5-turbo-0613",
+                            "gpt-3.5-turbo",
+                            "gpt-3.5-turbo-16k-0613",
+                            "gpt-3.5-turbo-16k",
+                            "gpt-4-0613",
+                            "gpt-4-32k-0613",
+                            "gpt-4",
+                            "gpt-4-32k",
+                        ],
+                        "Anthropic": [
+                            "claude-v1",
+                            "claude-v1-100k",
+                            "claude-instant-v1",
+                            "claude-instant-v1-100k",
+                            "claude-v1.3",
+                            "claude-v1.3-100k",
+                            "claude-v1.2",
+                            "claude-v1.0",
+                            "claude-instant-v1.1",
+                            "claude-instant-v1.1-100k",
+                            "claude-instant-v1.0",
+                        ],
+                        "ChatAnthropic": [
+                            "claude-v1",
+                            "claude-v1-100k",
+                            "claude-instant-v1",
+                            "claude-instant-v1-100k",
+                            "claude-v1.3",
+                            "claude-v1.3-100k",
+                            "claude-v1.2",
+                            "claude-v1.0",
+                            "claude-instant-v1.1",
+                            "claude-instant-v1.1-100k",
+                            "claude-instant-v1.0",
+                        ],
+                    }
+                },
+            },
+        },
+    },
+}
 
 
 def test_get_all(client: TestClient):
@@ -8,7 +88,7 @@ def test_get_all(client: TestClient):
     assert response.status_code == 200
     json_response = response.json()
     # We need to test the custom nodes
-    assert "ZeroShotPrompt" in json_response["prompts"]
+    assert "PromptTemplate" in json_response["prompts"]
     # All CUSTOM_TOOLS(dict) should be in the response
     assert all(tool in json_response["tools"] for tool in CUSTOM_TOOLS.keys())
 
@@ -95,15 +175,20 @@ INVALID_PROMPT = "This is an invalid prompt without any input variable."
 
 
 def test_valid_prompt(client: TestClient):
-    response = client.post("api/v1/validate/prompt", json={"template": VALID_PROMPT})
+    PROMPT_REQUEST["template"] = VALID_PROMPT
+    response = client.post("api/v1/validate/prompt", json=PROMPT_REQUEST)
     assert response.status_code == 200
-    assert response.json() == {"input_variables": ["product"]}
+    assert response.json()["input_variables"] == ["product"]
 
 
 def test_invalid_prompt(client: TestClient):
-    response = client.post("api/v1/validate/prompt", json={"template": INVALID_PROMPT})
+    PROMPT_REQUEST["template"] = INVALID_PROMPT
+    response = client.post(
+        "api/v1/validate/prompt",
+        json=PROMPT_REQUEST,
+    )
     assert response.status_code == 200
-    assert response.json() == {"input_variables": []}
+    assert response.json()["input_variables"] == []
 
 
 @pytest.mark.parametrize(
@@ -116,8 +201,8 @@ def test_invalid_prompt(client: TestClient):
     ],
 )
 def test_various_prompts(client, prompt, expected_input_variables):
-    response = client.post("api/v1/validate/prompt", json={"template": prompt})
+    TimeTravelGuideChainNode().to_dict()
+    PROMPT_REQUEST["template"] = prompt
+    response = client.post("api/v1/validate/prompt", json=PROMPT_REQUEST)
     assert response.status_code == 200
-    assert response.json() == {
+    assert response.json()["input_variables"] == expected_input_variables
-        "input_variables": expected_input_variables,
-    }

tests/test_graph.py

@@ -9,13 +9,9 @@ from langchain.chains.base import Chain
 from langchain.llms.fake import FakeListLLM
 from langflow.graph import Graph
 from langflow.graph.vertex.types import (
-    AgentVertex,
-    ChainVertex,
     FileToolVertex,
     LLMVertex,
-    PromptVertex,
     ToolkitVertex,
-    ToolVertex,
     WrapperVertex,
 )
 from langflow.processing.process import get_result_and_thought
@@ -244,10 +240,9 @@ def test_build_params(basic_graph):
     assert "memory" in root.params
 
 
-def test_build(basic_graph, complex_graph):
+def test_build(basic_graph):
     """Test Node's build method"""
     assert_agent_was_built(basic_graph)
-    assert_agent_was_built(complex_graph)
 
 
 def assert_agent_was_built(graph):
@@ -260,34 +255,6 @@ def assert_agent_was_built(graph):
     assert isinstance(result, Chain)
 
 
-def test_agent_node_build(complex_graph):
-    agent_node = get_node_by_type(complex_graph, AgentVertex)
-    assert agent_node is not None
-    built_object = agent_node.build()
-    assert built_object is not None
-
-
-def test_tool_node_build(complex_graph):
-    tool_node = get_node_by_type(complex_graph, ToolVertex)
-    assert tool_node is not None
-    built_object = tool_node.build()
-    assert built_object is not None
-
-
-def test_chain_node_build(complex_graph):
-    chain_node = get_node_by_type(complex_graph, ChainVertex)
-    assert chain_node is not None
-    built_object = chain_node.build()
-    assert built_object is not None
-
-
-def test_prompt_node_build(complex_graph):
-    prompt_node = get_node_by_type(complex_graph, PromptVertex)
-    assert prompt_node is not None
-    built_object = prompt_node.build()
-    assert built_object is not None
-
-
 def test_llm_node_build(basic_graph):
     llm_node = get_node_by_type(basic_graph, LLMVertex)
     assert llm_node is not None

tests/test_prompts_template.py

@@ -92,51 +92,3 @@ def test_prompt_template(client: TestClient):
         "advanced": False,
         "info": "",
     }
-
-
-def test_zero_shot_prompt(client: TestClient):
-    response = client.get("api/v1/all")
-    assert response.status_code == 200
-    json_response = response.json()
-    prompts = json_response["prompts"]
-    prompt = prompts["ZeroShotPrompt"]
-    template = prompt["template"]
-    assert template["prefix"] == {
-        "required": False,
-        "placeholder": "",
-        "show": True,
-        "multiline": True,
-        "value": "Answer the following questions as best you can. You have access to the following tools:",  # noqa: E501
-        "password": False,
-        "name": "prefix",
-        "type": "prompt",
-        "list": False,
-        "advanced": False,
-        "info": "",
-    }
-    assert template["suffix"] == {
-        "required": True,
-        "placeholder": "",
-        "show": True,
-        "multiline": True,
-        "value": "Begin!\n\nQuestion: {input}\nThought:{agent_scratchpad}",
-        "password": False,
-        "name": "suffix",
-        "type": "prompt",
-        "list": False,
-        "advanced": False,
-        "info": "",
-    }
-    assert template["format_instructions"] == {
-        "required": True,
-        "placeholder": "",
-        "show": True,
-        "multiline": True,
-        "value": "Use the following format:\n\nQuestion: the input question you must answer\nThought: you should always think about what to do\nAction: the action to take, should be one of [{tool_names}]\nAction Input: the input to the action\nObservation: the result of the action\n... (this Thought/Action/Action Input/Observation can repeat N times)\nThought: I now know the final answer\nFinal Answer: the final answer to the original input question",  # noqa: E501
-        "password": False,
-        "name": "format_instructions",
-        "type": "prompt",
-        "list": False,
-        "advanced": False,
-        "info": "",
-    }