Merge branch 'fix/minor_ui_adjustments' of https://github.com/langflow-ai/langflow into fix/minor_ui_adjustments

.gitattributes

@@ -11,12 +11,12 @@
 *.ts text
 *.tsx text
 *.md text
-*.mdx text working-tree-encoding = UTF-8
+*.mdx text
 *.yml text
 *.yaml text
 *.xml text
 *.csv text
-*.json text working-tree-encoding = UTF-8
+*.json text
 *.sh text
 *.Dockerfile text
 Dockerfile text

src/backend/base/langflow/api/utils.py

@@ -219,7 +219,7 @@ async def build_and_cache_graph_from_db(flow_id: str, session: Session, chat_ser
         if vertex is None:
             raise ValueError(f"Vertex {vertex_id} not found")
         if not vertex._raw_params.get("session_id"):
-            vertex.update_raw_params({"session_id": flow_id})
+            vertex.update_raw_params({"session_id": flow_id}, overwrite=True)
     await chat_service.set_cache(flow_id, graph)
     return graph
 

src/backend/base/langflow/api/v1/files.py

@@ -110,7 +110,7 @@ async def download_profile_picture(
         extension = file_name.split(".")[-1]
         config_dir = get_storage_service().settings_service.settings.config_dir
         config_path = Path(config_dir)
-        folder_path = config_path / 'profile_pictures' / folder_name
+        folder_path = config_path / "profile_pictures" / folder_name
         content_type = build_content_type_from_extension(extension)
         file_content = await storage_service.get_file(flow_id=folder_path, file_name=file_name)
         return StreamingResponse(BytesIO(file_content), media_type=content_type)
@@ -140,7 +140,6 @@ async def list_profile_pictures(storage_service: StorageService = Depends(get_st
         raise HTTPException(status_code=500, detail=str(e))
 
 
-
 @router.get("/list/{flow_id}")
 async def list_files(
     flow_id: UUID = Depends(get_flow_id), storage_service: StorageService = Depends(get_storage_service)

src/backend/base/langflow/base/vectorstores/utils.py

@@ -15,7 +15,7 @@ def chroma_collection_to_records(collection_dict: dict):
     for i, doc in enumerate(collection_dict["documents"]):
         record_dict = {
             "id": collection_dict["ids"][i],
-            "document": doc,
+            "text": doc,
         }
         if "metadatas" in collection_dict:
             for key, value in collection_dict["metadatas"][i].items():

src/backend/base/langflow/components/outputs/RecordsOutput.py

@@ -16,4 +16,5 @@ class RecordOutput(CustomComponent):
         }
 
     def build(self, input_value: Record) -> Record:
+        self.status = input_value
         return input_value

src/backend/base/langflow/components/retrievers/SelfQueryRetriever.py

@@ -0,0 +1,68 @@
+# from langflow.field_typing import Data
+from langchain.chains.query_constructor.base import AttributeInfo
+from langchain.retrievers.self_query.base import SelfQueryRetriever
+from langchain_core.vectorstores import VectorStore
+
+from langflow.custom import CustomComponent
+from langflow.field_typing import BaseLanguageModel, Text
+from langflow.schema import Record
+from langflow.schema.message import Message
+
+
+class SelfQueryRetrieverComponent(CustomComponent):
+    display_name: str = "Self Query Retriever"
+    description: str = "Retriever that uses a vector store and an LLM to generate the vector store queries."
+    icon = "LangChain"
+
+    def build_config(self):
+        return {
+            "query": {
+                "display_name": "Query",
+                "input_types": ["Message", "Text"],
+                "info": "Query to be passed as input.",
+            },
+            "vectorstore": {
+                "display_name": "Vector Store",
+                "info": "Vector Store to be passed as input.",
+            },
+            "attribute_infos": {
+                "display_name": "Metadata Field Info",
+                "info": "Metadata Field Info to be passed as input.",
+            },
+            "document_content_description": {
+                "display_name": "Document Content Description",
+                "info": "Document Content Description to be passed as input.",
+            },
+            "llm": {
+                "display_name": "LLM",
+                "info": "LLM to be passed as input.",
+            },
+        }
+
+    def build(
+        self,
+        query: Message,
+        vectorstore: VectorStore,
+        attribute_infos: list[Record],
+        document_content_description: Text,
+        llm: BaseLanguageModel,
+    ) -> Record:
+        metadata_field_infos = [AttributeInfo(**record.data) for record in attribute_infos]
+        self_query_retriever = SelfQueryRetriever.from_llm(
+            llm=llm,
+            vectorstore=vectorstore,
+            document_contents=document_content_description,
+            metadata_field_info=metadata_field_infos,
+            enable_limit=True,
+        )
+
+        if isinstance(query, Message):
+            input_text = query.text
+        elif isinstance(query, str):
+            input_text = query
+        else:
+            raise ValueError(f"Query type {type(query)} not supported.")
+        documents = self_query_retriever.invoke(input=input_text)
+        records = [Record.from_document(document) for document in documents]
+        self.status = records
+        return records

src/backend/base/langflow/components/vectorstores/Chroma.py

@@ -1,3 +1,4 @@
+from copy import deepcopy
 from typing import List, Optional, Union
 
 import chromadb
@@ -6,6 +7,7 @@ from langchain_chroma import Chroma
 from langchain_core.embeddings import Embeddings
 from langchain_core.retrievers import BaseRetriever
 from langchain_core.vectorstores import VectorStore
+
 from langflow.base.vectorstores.utils import chroma_collection_to_records
 from langflow.custom import CustomComponent
 from langflow.schema import Record
@@ -48,6 +50,11 @@ class ChromaComponent(CustomComponent):
                 "display_name": "Server SSL Enabled",
                 "advanced": True,
             },
+            "allow_duplicates": {
+                "display_name": "Allow Duplicates",
+                "advanced": True,
+                "info": "If false, will not add documents that are already in the Vector Store.",
+            },
         }
 
     def build(
@@ -61,6 +68,7 @@ class ChromaComponent(CustomComponent):
         chroma_server_host: Optional[str] = None,
         chroma_server_http_port: Optional[int] = None,
         chroma_server_grpc_port: Optional[int] = None,
+        allow_duplicates: bool = False,
     ) -> Union[VectorStore, BaseRetriever]:
         """
         Builds the Vector Store or BaseRetriever object.
@@ -75,6 +83,7 @@ class ChromaComponent(CustomComponent):
         - chroma_server_host (Optional[str]): The host for the Chroma server.
         - chroma_server_http_port (Optional[int]): The HTTP port for the Chroma server.
         - chroma_server_grpc_port (Optional[int]): The gRPC port for the Chroma server.
+        - allow_duplicates (bool): Whether to allow duplicates in the Vector Store.
 
         Returns:
         - Union[VectorStore, BaseRetriever]: The Vector Store or BaseRetriever object.
@@ -93,35 +102,34 @@ class ChromaComponent(CustomComponent):
             )
             client = chromadb.HttpClient(settings=chroma_settings)
 
-        # If documents, then we need to create a Chroma instance using .from_documents
-
         # Check index_directory and expand it if it is a relative path
         if index_directory is not None:
             index_directory = self.resolve_path(index_directory)
 
+        chroma = Chroma(
+            persist_directory=index_directory,
+            client=client,
+            embedding_function=embedding,
+            collection_name=collection_name,
+        )
+        if allow_duplicates:
+            stored_records = []
+        else:
+            stored_records = chroma_collection_to_records(chroma.get())
+            _stored_documents_without_id = []
+            for record in deepcopy(stored_records):
+                del record.id
+                _stored_documents_without_id.append(record)
         documents = []
         for _input in inputs or []:
             if isinstance(_input, Record):
-                documents.append(_input.to_lc_document())
+                if _input not in _stored_documents_without_id:
+                    documents.append(_input.to_lc_document())
             else:
-                documents.append(_input)
+                raise ValueError("Inputs must be a Record objects.")
-        if documents is not None and embedding is not None:
-            if len(documents) == 0:
-                raise ValueError("If documents are provided, there must be at least one document.")
-            chroma = Chroma.from_documents(
-                documents=documents,  # type: ignore
-                persist_directory=index_directory,
-                collection_name=collection_name,
-                embedding=embedding,
-                client=client,
-            )
-        else:
-            chroma = Chroma(
-                persist_directory=index_directory,
-                client=client,
-                embedding_function=embedding,
-            )
 
-        store = chroma.get()
+        if documents and embedding is not None:
-        self.status = chroma_collection_to_records(store)
+            chroma.add_documents(documents)
+
+        self.status = stored_records
         return chroma

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

@@ -126,8 +126,11 @@ class CustomComponent(Component):
     @staticmethod
     def resolve_path(path: str) -> str:
         """Resolves the path to an absolute path."""
+        if not path:
+            return path
         path_object = Path(path)
-        if path_object.parts[0] == "~":
+
+        if path_object.parts and path_object.parts[0] == "~":
             path_object = path_object.expanduser()
         elif path_object.is_relative_to("."):
             path_object = path_object.resolve()

src/backend/base/langflow/field_typing/prompt.py

@@ -25,6 +25,7 @@ class Prompt(Record):
         prompt_template = PromptTemplate.from_template(self.template)
         variables_with_str_values = dict_values_to_string(self.variables)
         formatted_prompt = prompt_template.format(**variables_with_str_values)
+        self.text = formatted_prompt
         return formatted_prompt
 
     @classmethod

src/backend/base/langflow/helpers/folders.py

@@ -20,4 +20,4 @@ def generate_unique_folder_name(folder_name, user_id, session):
 
         # If a folder with the name already exists, append (n) to the name and increment n
         folder_name = f"{original_name} ({n})"
-        n += 1
+        n += 1

src/backend/base/langflow/schema/record.py

@@ -1,12 +1,12 @@
 import copy
 import json
-from typing import cast, Optional
+from typing import Optional, cast
 
 from langchain_core.documents import Document
 from langchain_core.messages import AIMessage, BaseMessage, HumanMessage, SystemMessage
+from langchain_core.prompt_values import ImagePromptValue
 from langchain_core.prompts.image import ImagePromptTemplate
 from pydantic import BaseModel, model_serializer, model_validator
-from langchain_core.prompt_values import ImagePromptValue
 
 
 class Record(BaseModel):
@@ -200,3 +200,6 @@ class Record(BaseModel):
 
     def __contains__(self, key):
         return key in self.data
+
+    def __eq__(self, other):
+        return isinstance(other, Record) and self.data == other.data

src/frontend/.prettierignore

@@ -1 +1 @@
-build/*
+build/*

src/frontend/package.json

@@ -82,7 +82,7 @@
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "format": "npx prettier --write \"{docs,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
+    "format": "npx prettier --write \"{tests,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
     "type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
   },
   "simple-git-hooks": {

src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx

@@ -28,7 +28,7 @@ export default function SwitchOutputView(nodeId): JSX.Element {
   if (resultMessage.raw) {
     resultMessage = resultMessage.raw;
   }
-  console.log("resultType", results);
+
   return (
     <>
       <Case condition={!resultType || resultType === "unknown"}>

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

@@ -82,7 +82,9 @@ export default function ParameterComponent({
   const [openOutputModal, setOpenOutputModal] = useState(false);
   const flowPool = useFlowStore((state) => state.flowPool);
 
-  const displayOutputPreview = !!flowPool[data.id];
+  const displayOutputPreview =
+    !!flowPool[data.id] &&
+    flowPool[data.id][flowPool[data.id].length - 1]?.valid;
 
   const unknownOutput = !!(
     flowPool[data.id] &&

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

@@ -13,7 +13,7 @@ import {
   TOOLTIP_OUTDATED_NODE,
 } from "../../constants/constants";
 import { BuildStatus } from "../../constants/enums";
-import { getSpecificClassFromBuildStatus } from "../helpers/get-class-from-build-status";
+import { postCustomComponent } from "../../controllers/API";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
@@ -25,6 +25,8 @@ import { NodeDataType } from "../../types/flow";
 import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, cn } from "../../utils/utils";
+import { countHandlesFn } from "../helpers/count-handles";
+import { getSpecificClassFromBuildStatus } from "../helpers/get-class-from-build-status";
 import useCheckCodeValidity from "../hooks/use-check-code-validity";
 import useIconNodeRender from "../hooks/use-icon-render";
 import useIconStatus from "../hooks/use-icons-status";
@@ -34,9 +36,7 @@ import useValidationStatusString from "../hooks/use-validation-status-string";
 import getFieldTitle from "../utils/get-field-title";
 import sortFields from "../utils/sort-fields";
 import ParameterComponent from "./components/parameterComponent";
-import { postCustomComponent } from "../../controllers/API";
 import { useShortcutsStore } from "../../stores/shortcuts";
-import { countHandlesFn } from "../helpers/count-handles";
 
 export default function GenericNode({
   data,
@@ -260,6 +260,7 @@ export default function GenericNode({
           openAdvancedModal={false}
           onCloseAdvancedModal={() => {}}
           selected={selected}
+          updateNode={handleUpdateCode}
         />
       </NodeToolbar>
     );

src/frontend/src/CustomNodes/hooks/use-icons-status.tsx

@@ -4,11 +4,21 @@ import Loading from "../../components/ui/loading";
 import Xmark from "../../components/ui/xmark";
 import { BuildStatus } from "../../constants/enums";
 import { VertexBuildTypeAPI } from "../../types/api";
+import { cn } from "../../utils/utils";
 
 const useIconStatus = (
   buildStatus: BuildStatus | undefined,
   validationStatus: VertexBuildTypeAPI | null,
 ) => {
+  const conditionSuccess = validationStatus && validationStatus.valid;
+  const conditionInactive =
+    validationStatus &&
+    !validationStatus.valid &&
+    buildStatus === BuildStatus.INACTIVE;
+  const conditionError =
+    buildStatus === BuildStatus.ERROR ||
+    (validationStatus && !validationStatus.valid);
+
   const renderIconStatus = () => {
     if (buildStatus === BuildStatus.BUILDING) {
       return <Loading className="text-medium-indigo" />;
@@ -17,31 +27,30 @@ const useIconStatus = (
         <>
           <IconComponent
             name="Play"
-            className="absolute ml-0.5 h-5 fill-current stroke-2 text-medium-indigo opacity-0 transition-all group-hover:opacity-100"
+            className={cn(
+              !conditionSuccess && !conditionInactive && !conditionError
+                ? "opacity-100"
+                : "opacity-0",
+              "absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100",
+            )}
           />
-          {validationStatus && validationStatus.valid ? (
+          {conditionSuccess ? (
             <Checkmark
-              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover:opacity-0"
+              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover/node:opacity-0"
               isVisible={true}
             />
-          ) : validationStatus &&
+          ) : conditionInactive ? (
-            !validationStatus.valid &&
-            buildStatus === BuildStatus.INACTIVE ? (
             <IconComponent
               name="Play"
-              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-green opacity-30 transition-all group-hover:opacity-0"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-gray opacity-30 transition-all group-hover/node:opacity-0"
             />
-          ) : buildStatus === BuildStatus.ERROR ||
+          ) : conditionError ? (
-            (validationStatus && !validationStatus.valid) ? (
             <Xmark
               isVisible={true}
-              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover:opacity-0"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover/node:opacity-0"
             />
           ) : (
-            <IconComponent
+            <></>
-              name="Play"
-              className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground opacity-100 transition-all group-hover:opacity-0"
-            />
           )}
         </>
       );

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

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
+import { useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { useEffect, useMemo, useRef, useState } from "react";
 import IOModal from "../../modals/IOModal";
 import ApiModal from "../../modals/apiModal/views";
 import ShareModal from "../../modals/shareModal";

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -26,7 +26,6 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
-import ExportModal from "../../modals/exportModal";
 import { Case } from "../../shared/components/caseComponent";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
@@ -43,9 +42,9 @@ import IconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import KeypairListComponent from "../keypairListComponent";
 import ShadTooltip from "../shadTooltipComponent";
+import { Button } from "../ui/button";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
-import { Button } from "../ui/button";
 
 export default function CodeTabsComponent({
   flow,

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

@@ -16,11 +16,11 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { cn } from "../../../../utils/utils";
 import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
-import { useShortcutsStore } from "../../../../stores/shortcuts";
 
 export const MenuBar = ({}: {}): JSX.Element => {
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
@@ -115,7 +115,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                       title: UPLOAD_ERROR_ALERT,
                       list: [error],
                     });
-                  }
+                  },
                 );
               }}
             >
@@ -201,7 +201,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
               className={cn(
                 "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
+                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
               )}
             />
             {printByBuildStatus()}

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

@@ -1,9 +1,9 @@
 import { useContext } from "react";
-import profileCircle from "../../assets/profile-circle.png";
 import { FaDiscord, FaGithub } from "react-icons/fa";
 import { RiTwitterXFill } from "react-icons/ri";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import AlertDropdown from "../../alerts/alertDropDown";
+import profileCircle from "../../assets/profile-circle.png";
 import {
   BACKEND_URL,
   BASE_URL_API,
@@ -18,7 +18,6 @@ import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useLocationStore } from "../../stores/locationStore";
 import { useStoreStore } from "../../stores/storeStore";
-import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import {
@@ -79,7 +78,7 @@ export default function Header(): JSX.Element {
 
   return (
     <div className="header-arrangement">
-      <div className="header-start-display lg:w-[30%]">
+      <div className="header-start-display lg:w-[407px]">
         <Link to="/all" className="cursor-pointer" onClick={checkForChanges}>
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
@@ -202,8 +201,9 @@ export default function Header(): JSX.Element {
                       `${BACKEND_URL.slice(
                         0,
                         BACKEND_URL.length - 1,
-                      )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image ?? "Space/046-rocket.png"}` ??
+                      )}${BASE_URL_API}files/profile_pictures/${
-                      profileCircle
+                        userData?.profile_image ?? "Space/046-rocket.png"
+                      }` ?? profileCircle
                     }
                     className="h-7 w-7 shrink-0 focus-visible:outline-0"
                   />
@@ -219,8 +219,9 @@ export default function Header(): JSX.Element {
                             `${BACKEND_URL.slice(
                               0,
                               BACKEND_URL.length - 1,
-                            )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
+                            )}${BASE_URL_API}files/profile_pictures/${
-                            profileCircle
+                              userData?.profile_image
+                            }` ?? profileCircle
                           }
                           className="h-5 w-5 focus-visible:outline-0 "
                         />

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

@@ -48,12 +48,12 @@ export default function InputFileComponent({
   const handleButtonClick = (): void => {
     // Create a file input element
     const input = document.createElement("input");
+    document.body.appendChild(input);
     input.type = "file";
     input.accept = fileTypes?.join(",");
     input.style.display = "none"; // Hidden from view
     input.multiple = false; // Allow only one file selection
-
+    const onChangeFile = (event: Event): void => {
-    input.onchange = (event: Event): void => {
       setLoading(true);
 
       // Get the selected file
@@ -90,6 +90,8 @@ export default function InputFileComponent({
       }
     };
 
+    input.addEventListener("change", onChangeFile);
+
     // Trigger the file selection dialog
     input.click();
   };

src/frontend/src/components/tableComponent/components/TableOptions/index.tsx

@@ -1,7 +1,7 @@
 import { cn } from "../../../../utils/utils";
+import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
-import IconComponent from "../../../genericIconComponent";
 
 export default function TableOptions({
   resetGrid,
@@ -18,7 +18,7 @@ export default function TableOptions({
 }): JSX.Element {
   return (
     <div className={cn("absolute bottom-3 left-6")}>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-3">
         <div>
           <ShadTooltip content="Reset Columns">
             <Button
@@ -31,7 +31,10 @@ export default function TableOptions({
             >
               <IconComponent
                 name="RotateCcw"
-                className={cn("h-5 w-5 text-primary transition-all")}
+                strokeWidth={2}
+                className={cn(
+                  "h-5 w-5 text-primary transition-all hover:text-accent-foreground",
+                )}
               />
             </Button>
           </ShadTooltip>
@@ -81,8 +84,8 @@ export default function TableOptions({
                 <IconComponent
                   name="Trash2"
                   className={cn(
-                    "h-5 w-5 text-primary transition-all",
+                    "h-5 w-5  text-primary transition-all",
-                    !hasSelection ? "" : "hover:text-destructive",
+                    !hasSelection ? "" : "hover:text-status-red ",
                   )}
                 />
               </Button>

src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx

@@ -1,6 +1,5 @@
 import { CustomCellRendererProps } from "ag-grid-react";
 import { cn, isTimeStampString } from "../../../../utils/utils";
-import ArrayReader from "../../../arrayReaderComponent";
 import DateReader from "../../../dateReaderComponent";
 import NumberReader from "../../../numberReader";
 import ObjectRender from "../../../objectRender";

src/frontend/src/components/tableComponent/index.tsx

@@ -12,7 +12,6 @@ import { cn, toTitleCase } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import TableOptions from "./components/TableOptions";
-import { useParams } from "react-router-dom";
 import resetGrid from "./utils/reset-grid-columns";
 
 interface TableComponentProps extends AgGridReactProps {
@@ -21,6 +20,7 @@ interface TableComponentProps extends AgGridReactProps {
   alertTitle?: string;
   alertDescription?: string;
   editable?: boolean | string[];
+  pagination?: boolean;
   onDelete?: () => void;
   onDuplicate?: () => void;
 }
@@ -134,7 +134,6 @@ const TableComponent = forwardRef<
           }}
           columnDefs={colDef}
           ref={realRef}
-          pagination={true}
           onGridReady={onGridReady}
           onColumnMoved={onColumnMoved}
           onStateUpdated={(e) => {
@@ -143,18 +142,20 @@ const TableComponent = forwardRef<
             }
           }}
         />
-        <TableOptions
+        {props.pagination && (
-          stateChange={columnStateChange}
+          <TableOptions
-          hasSelection={realRef.current?.api?.getSelectedRows().length > 0}
+            stateChange={columnStateChange}
-          duplicateRow={props.onDuplicate ? props.onDuplicate : undefined}
+            hasSelection={realRef.current?.api?.getSelectedRows().length > 0}
-          deleteRow={props.onDelete ? props.onDelete : undefined}
+            duplicateRow={props.onDuplicate ? props.onDuplicate : undefined}
-          resetGrid={() => {
+            deleteRow={props.onDelete ? props.onDelete : undefined}
-            resetGrid(realRef, initialColumnDefs);
+            resetGrid={() => {
-            setTimeout(() => {
+              resetGrid(realRef, initialColumnDefs);
-              setColumnStateChange(false);
+              setTimeout(() => {
-            }, 100);
+                setColumnStateChange(false);
-          }}
+              }, 100);
-        />
+            }}
+          />
+        )}
       </div>
     );
   },

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

@@ -5,7 +5,7 @@ import { cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
+  "inline-flex items-center gap-2 justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
   {
     variants: {
       variant: {

src/frontend/src/controllers/API/api.tsx

@@ -1,4 +1,4 @@
-import axios, { Axios, AxiosError, AxiosInstance } from "axios";
+import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { renewAccessToken } from ".";

src/frontend/src/icons/LangChain/LangChainIcon.jsx

@@ -0,0 +1,24 @@
+const SvgLangChainIcon = (props) => (
+  <svg
+    viewBox="0 0 81 41"
+    fill="none"
+    height="200"
+    width="400"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M61.514 11.157a3.94 3.94 0 0 0-2.806 1.158l-3.018 3.01a3.95 3.95 0 0 0-1.147 3.095l.019.191a3.9 3.9 0 0 0 1.128 2.314 3.6 3.6 0 0 0 1.496.9q.046.263.047.53c0 .797-.31 1.546-.874 2.107l-.186.186c-1.008-.344-1.848-.847-2.607-1.604a6.9 6.9 0 0 1-1.927-3.67l-.034-.193-.153.124a4 4 0 0 0-.294.265l-3.018 3.01a3.957 3.957 0 0 0 2.807 6.757 3.96 3.96 0 0 0 2.806-1.158l3.019-3.01a3.96 3.96 0 0 0 0-5.599 3.9 3.9 0 0 0-1.462-.92 3.25 3.25 0 0 1 .924-2.855 6.9 6.9 0 0 1 2.664 1.656 6.9 6.9 0 0 1 1.926 3.67l.035.193.153-.124q.155-.125.296-.267l3.018-3.01a3.956 3.956 0 0 0-2.808-6.756z"
+      fill="CurrentColor"
+    />
+    <path
+      d="M59.897.149h-39.49C9.153.149 0 9.279 0 20.5c0 11.222 9.154 20.351 20.406 20.351h39.49c11.253 0 20.407-9.13 20.407-20.35C80.303 9.277 71.149.148 59.897.148M40.419 32.056c-.651.134-1.384.158-1.882-.36-.183.42-.612.199-.943.144-.03.085-.057.16-.085.246-1.1.073-1.925-1.046-2.449-1.89-1.04-.562-2.222-.904-3.285-1.492-.062.968.15 2.17-.774 2.794-.047 1.862 2.824.22 3.088 1.608-.204.022-.43-.033-.594.124-.749.726-1.608-.55-2.471-.023-1.16.582-1.276 1.059-2.71 1.179-.08-.12-.047-.2.02-.273.404-.468.433-1.02 1.122-1.22-.71-.111-1.303.28-1.901.59-.778.317-.772-.717-1.968.054-.132-.108-.069-.206.007-.289.304-.37.704-.425 1.155-.405-2.219-1.233-3.263 1.508-4.288.145-.308.081-.424.358-.618.553-.167-.183-.04-.405-.033-.62-.2-.094-.453-.139-.394-.459-.391-.132-.665.1-.957.32-.263-.203.178-.5.26-.712.234-.407.769-.084 1.04-.377.772-.437 1.847.273 2.729.153.68.085 1.52-.61 1.179-1.305-.726-.926-.598-2.137-.614-3.244-.09-.645-1.643-1.467-2.092-2.163-.555-.627-.987-1.353-1.42-2.068-1.561-3.014-1.07-6.886-3.037-9.685-.89.49-2.048.259-2.816-.399-.414.377-.432.87-.465 1.392-.994-.99-.87-2.863-.075-3.966a5.3 5.3 0 0 1 1.144-1.11c.098-.07.131-.14.129-.25.786-3.524 6.144-2.845 7.838-.348 1.229 1.537 1.6 3.57 2.994 4.997 1.875 2.047 4.012 3.85 5.742 6.03 1.637 1.992 2.806 4.328 3.826 6.683.416.782.42 1.74 1.037 2.408.304.403 1.79 1.5 1.467 1.888.186.403 1.573.959 1.092 1.35zm26.026-12.024-3.018 3.01a6.96 6.96 0 0 1-2.875 1.728l-.056.016-.02.053a6.9 6.9 0 0 1-1.585 2.446l-3.019 3.01a6.94 6.94 0 0 1-4.932 2.035 6.94 6.94 0 0 1-4.932-2.035 6.95 6.95 0 0 1 0-9.838l3.018-3.01a6.9 6.9 0 0 1 2.871-1.721l.055-.017.02-.053a6.9 6.9 0 0 1 1.59-2.454l3.019-3.01a6.94 6.94 0 0 1 4.932-2.035c1.865 0 3.616.723 4.932 2.035a6.9 6.9 0 0 1 2.04 4.92c0 1.86-.724 3.607-2.04 4.918z"
+      fill="CurrentColor"
+    />
+    <path
+      d="M28.142 28.413c-.265 1.03-.35 2.782-1.694 2.832-.11.595.413.819.89.627.472-.215.696.171.855.556.729.106 1.806-.242 1.847-1.103-1.088-.625-1.424-1.813-1.896-2.914z"
+      fill="CurrentColor"
+    />
+  </svg>
+);
+export default SvgLangChainIcon;

src/frontend/src/icons/LangChain/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import SvgLangChainIcon from "./LangChainIcon";
+
+export const LangChainIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <SvgLangChainIcon ref={ref} {...props} />;
+});

src/frontend/src/icons/LangChain/langchain-icon.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 81 41" fill="none" height="200" width="400"  xmlns="http://www.w3.org/2000/svg">
+  <path d="M61.514 11.157a3.94 3.94 0 0 0-2.806 1.158l-3.018 3.01a3.95 3.95 0 0 0-1.147 3.095l.019.191a3.9 3.9 0 0 0 1.128 2.314 3.6 3.6 0 0 0 1.496.9q.046.263.047.53c0 .797-.31 1.546-.874 2.107l-.186.186c-1.008-.344-1.848-.847-2.607-1.604a6.9 6.9 0 0 1-1.927-3.67l-.034-.193-.153.124a4 4 0 0 0-.294.265l-3.018 3.01a3.957 3.957 0 0 0 2.807 6.757 3.96 3.96 0 0 0 2.806-1.158l3.019-3.01a3.96 3.96 0 0 0 0-5.599 3.9 3.9 0 0 0-1.462-.92 3.25 3.25 0 0 1 .924-2.855 6.9 6.9 0 0 1 2.664 1.656 6.9 6.9 0 0 1 1.926 3.67l.035.193.153-.124q.155-.125.296-.267l3.018-3.01a3.956 3.956 0 0 0-2.808-6.756z" fill="CurrentColor"/>
+  <path d="M59.897.149h-39.49C9.153.149 0 9.279 0 20.5c0 11.222 9.154 20.351 20.406 20.351h39.49c11.253 0 20.407-9.13 20.407-20.35C80.303 9.277 71.149.148 59.897.148M40.419 32.056c-.651.134-1.384.158-1.882-.36-.183.42-.612.199-.943.144-.03.085-.057.16-.085.246-1.1.073-1.925-1.046-2.449-1.89-1.04-.562-2.222-.904-3.285-1.492-.062.968.15 2.17-.774 2.794-.047 1.862 2.824.22 3.088 1.608-.204.022-.43-.033-.594.124-.749.726-1.608-.55-2.471-.023-1.16.582-1.276 1.059-2.71 1.179-.08-.12-.047-.2.02-.273.404-.468.433-1.02 1.122-1.22-.71-.111-1.303.28-1.901.59-.778.317-.772-.717-1.968.054-.132-.108-.069-.206.007-.289.304-.37.704-.425 1.155-.405-2.219-1.233-3.263 1.508-4.288.145-.308.081-.424.358-.618.553-.167-.183-.04-.405-.033-.62-.2-.094-.453-.139-.394-.459-.391-.132-.665.1-.957.32-.263-.203.178-.5.26-.712.234-.407.769-.084 1.04-.377.772-.437 1.847.273 2.729.153.68.085 1.52-.61 1.179-1.305-.726-.926-.598-2.137-.614-3.244-.09-.645-1.643-1.467-2.092-2.163-.555-.627-.987-1.353-1.42-2.068-1.561-3.014-1.07-6.886-3.037-9.685-.89.49-2.048.259-2.816-.399-.414.377-.432.87-.465 1.392-.994-.99-.87-2.863-.075-3.966a5.3 5.3 0 0 1 1.144-1.11c.098-.07.131-.14.129-.25.786-3.524 6.144-2.845 7.838-.348 1.229 1.537 1.6 3.57 2.994 4.997 1.875 2.047 4.012 3.85 5.742 6.03 1.637 1.992 2.806 4.328 3.826 6.683.416.782.42 1.74 1.037 2.408.304.403 1.79 1.5 1.467 1.888.186.403 1.573.959 1.092 1.35zm26.026-12.024-3.018 3.01a6.96 6.96 0 0 1-2.875 1.728l-.056.016-.02.053a6.9 6.9 0 0 1-1.585 2.446l-3.019 3.01a6.94 6.94 0 0 1-4.932 2.035 6.94 6.94 0 0 1-4.932-2.035 6.95 6.95 0 0 1 0-9.838l3.018-3.01a6.9 6.9 0 0 1 2.871-1.721l.055-.017.02-.053a6.9 6.9 0 0 1 1.59-2.454l3.019-3.01a6.94 6.94 0 0 1 4.932-2.035c1.865 0 3.616.723 4.932 2.035a6.9 6.9 0 0 1 2.04 4.92c0 1.86-.724 3.607-2.04 4.918z" fill="CurrentColor"/>
+  <path d="M28.142 28.413c-.265 1.03-.35 2.782-1.694 2.832-.11.595.413.819.89.627.472-.215.696.171.855.556.729.106 1.806-.242 1.847-1.103-1.088-.625-1.424-1.813-1.896-2.914z" fill="CurrentColor"/>
+</svg>

src/frontend/src/index.tsx

@@ -8,7 +8,6 @@ import "./style/index.css";
 // @ts-ignore
 import "./style/applies.css";
 // @ts-ignore
-import { StrictMode } from "react";
 import "./style/classes.css";
 
 const root = ReactDOM.createRoot(

src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx

@@ -254,7 +254,13 @@ export default function IOFieldView({
               <div className={left ? "h-56" : "h-full"}>
                 <RecordsOutputComponent
                   pagination={!left}
-                  rows={flowPoolNode?.data?.artifacts?.records ?? []}
+                  rows={
+                    Array.isArray(flowPoolNode?.data?.artifacts)
+                      ? flowPoolNode?.data?.artifacts?.map(
+                          (artifact) => artifact.data,
+                        ) ?? []
+                      : [flowPoolNode?.data?.artifacts]
+                  }
                   columnMode="union"
                 />
               </div>

src/frontend/src/modals/IOModal/components/SessionView/index.tsx

@@ -1,20 +1,10 @@
-import {
+import { CellEditRequestEvent, SelectionChangedEvent } from "ag-grid-community";
-  CellEditRequestEvent,
-  ColDef,
-  ColGroupDef,
-  SelectionChangedEvent,
-} from "ag-grid-community";
 import { useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
-import { Card, CardContent } from "../../../../components/ui/card";
+import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
+import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
-import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
-import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
-import HeaderMessagesComponent from "../../../../pages/SettingsPage/pages/messagesPage/components/headerMessages";
-import { Button } from "../../../../components/ui/button";
-import ForwardedIconComponent from "../../../../components/genericIconComponent";
-import { cn } from "../../../../utils/utils";
 
 export default function SessionView({ rows }: { rows: Array<any> }) {
   const columns = useMessagesStore((state) => state.columns);

src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx

@@ -18,7 +18,9 @@ const UploadFileButton = ({
       />
       <Button
         disabled={lockChat}
-        className={`font-bold text-white transition-all ${lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"}`}
+        className={`font-bold text-white transition-all ${
+          lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"
+        }`}
         onClick={handleButtonClick}
         variant="none"
         size="none"

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.tsx

@@ -1,6 +1,5 @@
 import ShortUniqueId from "short-unique-id";
 import useFileUpload from "./use-file-upload";
-import useAlertStore from "../../../../../../stores/alertStore";
 
 const fsErrorText =
   "Please ensure your file has one of the following extensions:";

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-handle-file-change.tsx

@@ -1,6 +1,6 @@
 import ShortUniqueId from "short-unique-id";
-import useFileUpload from "./use-file-upload";
 import useAlertStore from "../../../../../../stores/alertStore";
+import useFileUpload from "./use-file-upload";
 
 const fsErrorText =
   "Please ensure your file has one of the following extensions:";

src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-upload.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import ShortUniqueId from "short-unique-id";
-import useFileUpload from "./use-file-upload";
 import useAlertStore from "../../../../../../stores/alertStore";
+import useFileUpload from "./use-file-upload";
 
 const fsErrorText =
   "Please ensure your file has one of the following extensions:";

src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx

@@ -94,7 +94,9 @@ export default function ChatInput({
         </div>
 
         <div
-          className={`absolute bottom-2 left-4 ${lockChat || saveLoading ? "cursor-not-allowed" : ""}`}
+          className={`absolute bottom-2 left-4 ${
+            lockChat || saveLoading ? "cursor-not-allowed" : ""
+          }`}
         >
           <UploadFileButton
             lockChat={lockChat || saveLoading}

src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
-import formatFileName from "../../../filePreviewChat/utils/format-file-name";
 import FileCard from "../../../fileComponent";
+import formatFileName from "../../../filePreviewChat/utils/format-file-name";
 
 export default function FileCardWrapper({
   index,

src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx

@@ -7,16 +7,12 @@ import remarkMath from "remark-math";
 import MaleTechnology from "../../../../../assets/male-technologist.png";
 import Robot from "../../../../../assets/robot.png";
 import CodeTabsComponent from "../../../../../components/codeTabsComponent";
-import IconComponent, {
+import IconComponent from "../../../../../components/genericIconComponent";
-  ForwardedIconComponent,
-} from "../../../../../components/genericIconComponent";
 import SanitizedHTMLWrapper from "../../../../../components/sanitizedHTMLWrapper";
 import useAlertStore from "../../../../../stores/alertStore";
 import useFlowStore from "../../../../../stores/flowStore";
 import { chatMessagePropsType } from "../../../../../types/components";
 import { classNames, cn } from "../../../../../utils/utils";
-import FileCard from "../fileComponent";
-import formatFileName from "../filePreviewChat/utils/format-file-name";
 import FileCardWrapper from "./components/fileCardWrapper";
 
 export default function ChatMessage({

src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/get-classes.tsx

@@ -1,5 +1,7 @@
 export default function getClasses(isHovered: boolean): string {
-  return `relative ${false ? "h-20 w-20" : "h-20 w-80"} cursor-pointer rounded-lg border  border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${
+  return `relative ${
+    false ? "h-20 w-20" : "h-20 w-80"
+  } cursor-pointer rounded-lg border  border-ring bg-muted shadow transition duration-300 hover:drop-shadow-lg ${
     isHovered ? "shadow-md" : ""
   }`;
 }

src/frontend/src/modals/IOModal/components/chatView/fileComponent/utils/handle-download.tsx

@@ -18,7 +18,10 @@ export default async function handleDownload({
     isDownloading = true;
 
     const response = await fetch(
-      `${BACKEND_URL.slice(0, BACKEND_URL.length - 1)}${BASE_URL_API}files/download/${content}`,
+      `${BACKEND_URL.slice(
+        0,
+        BACKEND_URL.length - 1,
+      )}${BASE_URL_API}files/download/${content}`,
     );
     if (!response.ok) {
       throw new Error("Network response was not ok");

src/frontend/src/modals/IOModal/index.tsx

@@ -85,6 +85,7 @@ export default function IOModal({
   const [sessions, setSessions] = useState<string[]>([]);
   const messages = useMessagesStore((state) => state.messages);
   const setColumns = useMessagesStore((state) => state.setColumns);
+  const flowPool = useFlowStore((state) => state.flowPool);
   async function updateVertices() {
     return updateVerticesOrder(currentFlow!.id, null);
   }
@@ -229,10 +230,6 @@ export default function IOModal({
                           key={index}
                         >
                           <AccordionComponent
-                            disabled={
-                              node.data.node!.template["input_value"]?.value ===
-                              ""
-                            }
                             trigger={
                               <div className="file-component-badge-div">
                                 <ShadTooltip
@@ -288,12 +285,20 @@ export default function IOModal({
                       const output = outputs.find(
                         (output) => output.id === node.id,
                       )!;
+                      const textOutputValue =
+                        (flowPool[node!.id] ?? [])[
+                          (flowPool[node!.id]?.length ?? 1) - 1
+                        ]?.data?.artifacts ?? "";
+                      const disabled =
+                        textOutputValue === "" ||
+                        JSON.stringify(textOutputValue) === "{}";
                       return (
                         <div
                           className="file-component-accordion-div"
                           key={index}
                         >
                           <AccordionComponent
+                            disabled={disabled}
                             trigger={
                               <div className="file-component-badge-div">
                                 <ShadTooltip
@@ -353,13 +358,22 @@ export default function IOModal({
                           });
                         }}
                       >
-                        <div className="flex w-full items-center justify-between border-b px-2 py-1 align-middle">
+                        <div className="flex w-full items-center justify-between gap-2 overflow-hidden border-b px-2 py-3.5 align-middle">
-                          <Badge variant="gray" size="md">
+                          <ShadTooltip styleClasses="z-50" content={session}>
-                            {session}
+                            <div className="flex min-w-0">
-                          </Badge>
+                              <Badge
-                          <div className="flex items-center justify-center gap-2 align-middle">
+                                variant="gray"
+                                size="md"
+                                className="block truncate"
+                              >
+                                {session}
+                              </Badge>
+                            </div>
+                          </ShadTooltip>
+                          <div className="flex shrink-0 items-center justify-center gap-2 align-middle">
                             <Button
-                              variant="ghost"
+                              variant="none"
+                              size="icon"
                               onClick={(e) => {
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -370,7 +384,7 @@ export default function IOModal({
                             >
                               <ShadTooltip
                                 styleClasses="z-50"
-                                content={"delete"}
+                                content={"Delete"}
                               >
                                 <div>
                                   <IconComponent

src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx

@@ -2,7 +2,6 @@ import { ColDef, ValueGetterParams } from "ag-grid-community";
 import { useMemo } from "react";
 import TableNodeCellRender from "../../../components/tableComponent/components/tableNodeCellRender";
 import TableToggleCellRender from "../../../components/tableComponent/components/tableToggleCellRender";
-import TableTooltipRender from "../../../components/tableComponent/components/tableTooltipRender";
 
 const useColumnDefs = (
   myData: any,

src/frontend/src/modals/editNodeModal/index.tsx

@@ -3,6 +3,7 @@ import { forwardRef, useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
 import { Badge } from "../../components/ui/badge";
+import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import { NodeDataType } from "../../types/flow";
 import BaseModal from "../baseModal";
@@ -29,6 +30,8 @@ const EditNodeModal = forwardRef(
   ) => {
     const myData = useRef(cloneDeep(data));
 
+    const isDark = useDarkStore((state) => state.dark);
+
     const setNode = useFlowStore((state) => state.setNode);
 
     function changeAdvanced(n) {
@@ -66,13 +69,15 @@ const EditNodeModal = forwardRef(
     //    }, []);
 
     return (
-      <BaseModal key={data.id} size="medium-tall" open={open} setOpen={setOpen}>
+      <BaseModal key={data.id} open={open} setOpen={setOpen}>
         <BaseModal.Trigger>
           <></>
         </BaseModal.Trigger>
         <BaseModal.Header description={data.node?.description!}>
           <span className="pr-2">{data.type}</span>
-          <Badge variant="secondary">ID: {data.id}</Badge>
+          <Badge variant={isDark ? "gray" : "secondary"}>
+            <span className="relative top-[0.6px]">ID: {data.id}</span>
+          </Badge>
         </BaseModal.Header>
         <BaseModal.Content>
           <div className="flex h-full flex-col">

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

@@ -99,7 +99,7 @@ const ExportModal = forwardRef(
           </span>
         </BaseModal.Content>
 
-        <BaseModal.Footer submit={{ label: "Download Flow" }} />
+        <BaseModal.Footer submit={{ label: "Export" }} />
       </BaseModal>
     );
   },

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

@@ -180,6 +180,7 @@ export default function Page({
 
   function handleUndo(e: KeyboardEvent) {
     e.preventDefault();
+    e.stopImmediatePropagation();
     if (!isWrappedWithClass(e, "noundo")) {
       undo();
     }
@@ -187,6 +188,7 @@ export default function Page({
 
   function handleRedo(e: KeyboardEvent) {
     e.preventDefault();
+    e.stopImmediatePropagation();
     if (!isWrappedWithClass(e, "noundo")) {
       redo();
     }
@@ -194,6 +196,7 @@ export default function Page({
 
   function handleGroup(e: KeyboardEvent) {
     e.preventDefault();
+    e.stopImmediatePropagation();
     if (selectionMenuVisible) {
       handleGroupNode();
     }
@@ -202,6 +205,7 @@ export default function Page({
   function handleDuplicate(e: KeyboardEvent) {
     e.preventDefault();
     e.stopPropagation();
+    e.stopImmediatePropagation();
     const selectedNode = nodes.filter((obj) => obj.selected);
     if (selectedNode.length > 0) {
       paste(
@@ -216,6 +220,7 @@ export default function Page({
 
   function handleCopy(e: KeyboardEvent) {
     e.preventDefault();
+    e.stopImmediatePropagation();
     if (
       !isWrappedWithClass(e, "nocopy") &&
       window.getSelection()?.toString().length === 0 &&
@@ -227,6 +232,7 @@ export default function Page({
 
   function handleCut(e: KeyboardEvent) {
     e.preventDefault();
+    e.stopImmediatePropagation();
     if (
       !isWrappedWithClass(e, "nocopy") &&
       window.getSelection()?.toString().length === 0 &&
@@ -238,6 +244,7 @@ export default function Page({
 
   function handlePaste(e: KeyboardEvent) {
     e.preventDefault();
+    e.stopImmediatePropagation();
     if (
       !isWrappedWithClass(e, "nocopy") &&
       window.getSelection()?.toString().length === 0 &&
@@ -253,6 +260,7 @@ export default function Page({
 
   function handleDelete(e: KeyboardEvent) {
     e.preventDefault();
+    e.stopImmediatePropagation();
     if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
       takeSnapshot();
       deleteNode(lastSelection.nodes.map((node) => node.id));

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

@@ -3,9 +3,8 @@ import { useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useUpdateNodeInternals } from "reactflow";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
-import IconComponent, {
+import IconComponent from "../../../../components/genericIconComponent";
-  ForwardedIconComponent,
+import RenderIcons from "../../../../components/renderIconComponent";
-} from "../../../../components/genericIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import {
   Select,
@@ -22,7 +21,6 @@ import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useStoreStore } from "../../../../stores/storeStore";
-import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { nodeToolbarPropsType } from "../../../../types/components";
 import { FlowType } from "../../../../types/flow";
@@ -34,7 +32,6 @@ import {
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn, isThereModal } from "../../../../utils/utils";
 import ToolbarSelectItem from "./toolbarSelectItem";
-import RenderIcons from "../../../../components/renderIconComponent";
 
 export default function NodeToolbarComponent({
   data,
@@ -46,6 +43,7 @@ export default function NodeToolbarComponent({
   selected,
   setShowState,
   onCloseAdvancedModal,
+  updateNode,
 }: nodeToolbarPropsType): JSX.Element {
   const version = useDarkStore((state) => state.version);
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
@@ -307,6 +305,9 @@ export default function NodeToolbarComponent({
       case "delete":
         deleteNode(data.id);
         break;
+      case "update":
+        updateNode();
+        break;
       case "copy":
         const node = nodes.filter((node) => node.id === data.id);
         setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] });
@@ -452,7 +453,9 @@ export default function NodeToolbarComponent({
               side="top"
             >
               <button
-                className={`${isGroup ? "rounded-l-md" : ""} relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10`}
+                className={`${
+                  isGroup ? "rounded-l-md" : ""
+                } relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10`}
                 onClick={() => {
                   setShowModalAdvanced(true);
                 }}

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

@@ -28,9 +28,11 @@ export default function ToolbarSelectItem({
     <div className={`flex ${style}`} data-testid={dataTestId}>
       <ForwardedIconComponent
         name={icon}
-        className={`   mr-2  ${icon === "Share3" ? "absolute left-2  top-[0.25em] h-6 w-6" : "mt-[0.15em] h-4 w-4"}   ${
+        className={`   mr-2  ${
-          ping && "animate-pulse text-green-500"
+          icon === "Share3"
-        }`}
+            ? "absolute left-2  top-[0.25em] h-6 w-6"
+            : "mt-[0.15em] h-4 w-4"
+        }   ${ping && "animate-pulse text-green-500"}`}
       />
       <span className={`${icon === "Share3" ? "ml-[1.8em]" : " "}`}>
         {value}

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

@@ -107,7 +107,7 @@ const HeaderComponent = ({
                   name="Trash2"
                   className={cn(
                     "h-5 w-5 text-primary transition-all",
-                    disableFunctions ? "" : "hover:text-destructive",
+                    disableFunctions ? "" : "hover:text-status-red",
                   )}
                 />
               </Button>

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -2,7 +2,6 @@ import * as Form from "@radix-ui/react-form";
 import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
-import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
 import Header from "../../components/headerComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
@@ -22,6 +21,7 @@ import {
   patchUserInputStateType,
 } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
+import GradientChooserComponent from "../SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent";
 export default function ProfileSettingsPage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx

@@ -2,7 +2,6 @@ import ForwardedIconComponent from "../../../../../../components/genericIconComp
 import { Button } from "../../../../../../components/ui/button";
 import { API_PAGE_PARAGRAPH } from "../../../../../../constants/constants";
 import SecretKeyModal from "../../../../../../modals/secretKeyModal";
-import { cn } from "../../../../../../utils/utils";
 
 type ApiKeyHeaderComponentProps = {
   selectedRows: string[];

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts

@@ -1,7 +1,6 @@
-import { reject } from "lodash";
+import axios from "axios";
 import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
 import { getProfilePictures } from "../../../../../../../../../controllers/API";
-import axios from "axios";
 
 const useGetProfilePictures = (setErrorData) => {
   const handleGetProfilePictures = async () => {

src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx

@@ -1,4 +1,5 @@
 import * as Form from "@radix-ui/react-form";
+import { useEffect, useState } from "react";
 import { Button } from "../../../../../../components/ui/button";
 import {
   Card,
@@ -10,8 +11,6 @@ import {
 } from "../../../../../../components/ui/card";
 import { gradients } from "../../../../../../utils/styleUtils";
 import ProfilePictureChooserComponent from "./components/profilePictureChooserComponent";
-import { useEffect, useState } from "react";
-import { GenericAbortSignal } from "axios";
 
 type ProfilePictureFormComponentProps = {
   profilePicture: string;

src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

@@ -9,15 +9,15 @@ import {
   inputHandlerEventType,
   patchUserInputStateType,
 } from "../../../../types/components";
-import usePatchProfilePicture from "../hooks/use-patch-profile-picture";
 import usePatchPassword from "../hooks/use-patch-password";
+import usePatchProfilePicture from "../hooks/use-patch-profile-picture";
 import useSaveKey from "../hooks/use-save-key";
 import useScrollToElement from "../hooks/use-scroll-to-element";
 import GeneralPageHeaderComponent from "./components/GeneralPageHeader";
 import PasswordFormComponent from "./components/PasswordForm";
 import ProfilePictureFormComponent from "./components/ProfilePictureForm";
-import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
 import useGetProfilePictures from "./components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures";
+import StoreApiKeyFormComponent from "./components/StoreApiKeyForm";
 
 export default function GeneralPage() {
   const setCurrentFlowId = useFlowsManagerStore(

src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx

@@ -11,7 +11,6 @@ import { Badge } from "../../../../components/ui/badge";
 import { deleteGlobalVariable } from "../../../../controllers/API";
 import useAlertStore from "../../../../stores/alertStore";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables";
-import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
   const globalVariablesEntries = useGlobalVariablesStore(

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx

@@ -107,7 +107,9 @@ export default function EditShortcutButton({
     if (oldKey === null) {
       return `${key.length > 0 ? toTitleCase(key) : toTitleCase(key)}`;
     }
-    return `${oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()} + ${key.length > 0 ? toTitleCase(key) : key.toUpperCase()}`;
+    return `${
+      oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()
+    } + ${key.length > 0 ? toTitleCase(key) : key.toUpperCase()}`;
   }
 
   function checkForKeys(keys: string, keyToCompare: string): boolean {

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx

@@ -1,4 +1,3 @@
-import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
 import { useEffect, useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";

src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx

@@ -1,6 +1,4 @@
 import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
-import { Button } from "../../../../../../components/ui/button";
-import { cn } from "../../../../../../utils/utils";
 
 type HeaderMessagesComponentProps = {
   selectedRows: number[];

src/frontend/src/stores/foldersStore.tsx

@@ -7,7 +7,6 @@ import {
 } from "../pages/MainPage/services";
 import { FoldersStoreType } from "../types/zustand/folders";
 import useFlowsManagerStore from "./flowsManagerStore";
-import { uploadFlowsToDatabase } from "../controllers/API";
 
 export const useFolderStore = create<FoldersStoreType>((set, get) => ({
   folders: [],

src/frontend/src/stores/shortcuts.ts

@@ -23,7 +23,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   group: "mod+g",
   cut: "mod+x",
   paste: "mod+v",
-  api: "mod+r",
+  api: "mod+shift+r",
   update: "mod+u",
   download: "mod+j",
   freeze: "mod+f",

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

@@ -491,7 +491,7 @@ export type ChatInputType = {
   isDragging: boolean;
   files: FilePreviewType[];
   setFiles: (
-    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[])
+    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]),
   ) => void;
   chatValue: string;
   inputRef: {
@@ -547,6 +547,7 @@ export type nodeToolbarPropsType = {
   onCloseAdvancedModal?: (close: boolean) => void;
   selected: boolean;
   setShowState: (show: boolean | SetStateAction<boolean>) => void;
+  updateNode: () => void;
 };
 
 export type parsedDataType = {
@@ -593,7 +594,7 @@ export type chatMessagePropsType = {
   updateChat: (
     chat: ChatMessageType,
     message: string,
-    stream_url?: string
+    stream_url?: string,
   ) => void;
 };
 
@@ -685,12 +686,12 @@ export type codeTabsPropsType = {
       value: string,
       node: NodeType,
       template: TemplateVariableType,
-      tweak: tweakType
+      tweak: tweakType,
     ) => string;
     buildTweakObject?: (
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType
+      template: TemplateVariableType,
     ) => Promise<string | void>;
   };
   activeTweaks?: boolean;

src/frontend/src/utils/styleUtils.ts

@@ -1,5 +1,6 @@
 import {
   AlertCircle,
+  AlertTriangle,
   ArrowBigUp,
   ArrowLeft,
   ArrowUpToLine,
@@ -116,7 +117,6 @@ import {
   Settings,
   Settings2,
   Share,
-  AlertTriangle,
   Share2,
   Shield,
   Sliders,
@@ -146,11 +146,10 @@ import {
   Variable,
   Wand2,
   Workflow,
+  Wrench,
   X,
   XCircle,
   Zap,
-  PlaySquare,
-  Wrench,
 } from "lucide-react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -177,6 +176,7 @@ import {
 import { GroqIcon } from "../icons/Groq";
 import { HuggingFaceIcon } from "../icons/HuggingFace";
 import { IFixIcon } from "../icons/IFixIt";
+import { LangChainIcon } from "../icons/LangChain";
 import { MetaIcon } from "../icons/Meta";
 import { MidjourneyIcon } from "../icons/Midjorney";
 import { MongoDBIcon } from "../icons/MongoDB";
@@ -325,6 +325,7 @@ export const nodeIconsLucide: iconsType = {
   ChatOllamaModel: OllamaIcon,
   Faiss: MetaIcon,
   FaissSearch: MetaIcon,
+  LangChain: LangChainIcon,
   AzureOpenAiModel: AzureIcon,
   Redis: RedisIcon,
   RedisSearch: RedisIcon,

src/frontend/src/utils/utils.ts

@@ -1,6 +1,8 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
+import { MODAL_CLASSES } from "../constants/constants";
 import { APIDataType, TemplateVariableType } from "../types/api";
 import {
   groupedObjType,
@@ -9,8 +11,6 @@ import {
 } from "../types/components";
 import { NodeType } from "../types/flow";
 import { FlowState } from "../types/tabs";
-import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
-import { MODAL_CLASSES } from "../constants/constants";
 
 export function classNames(...classes: Array<string>): string {
   return classes.filter(Boolean).join(" ");

src/frontend/tailwind.config.js

@@ -236,6 +236,10 @@ module.exports = {
         ".text-align-last-right": {
           "text-align-last": "right",
         },
+        ":focus-visible": {
+          outline: "none  !important",
+          outlineOffset: "0px !important",
+        },
       });
     }),
     require("@tailwindcss/typography"),

src/frontend/tests/end-to-end/assets/ChatTest.json

@@ -44,9 +44,7 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                "input_types": [
+                "input_types": ["Text"],
-                  "Text"
-                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -70,9 +68,7 @@
                 "info": "In case of Message being a Record, this template will be used to convert it to text.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
+                "input_types": ["Text"]
-                  "Text"
-                ]
               },
               "return_record": {
                 "type": "bool",
@@ -104,10 +100,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                "options": [
+                "options": ["Machine", "User"],
-                  "Machine",
-                  "User"
-                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -115,9 +108,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
+                "input_types": ["Text"]
-                  "Text"
-                ]
               },
               "sender_name": {
                 "type": "str",
@@ -137,9 +128,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
+                "input_types": ["Text"]
-                  "Text"
-                ]
               },
               "session_id": {
                 "type": "str",
@@ -158,20 +147,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
+                "input_types": ["Text"]
-                  "Text"
-                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-            "base_classes": [
+            "base_classes": ["object", "Record", "str", "Text"],
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -182,10 +164,7 @@
               "return_record": null,
               "record_template": null
             },
-            "output_types": [
+            "output_types": ["Text", "Record"],
-              "Text",
-              "Record"
-            ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -280,10 +259,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                "options": [
+                "options": ["Machine", "User"],
-                  "Machine",
-                  "User"
-                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -291,9 +267,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
+                "input_types": ["Text"]
-                  "Text"
-                ]
               },
               "sender_name": {
                 "type": "str",
@@ -313,9 +287,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
+                "input_types": ["Text"]
-                  "Text"
-                ]
               },
               "session_id": {
                 "type": "str",
@@ -334,20 +306,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                "input_types": [
+                "input_types": ["Text"]
-                  "Text"
-                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
-            "base_classes": [
+            "base_classes": ["object", "Record", "str", "Text"],
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
             "display_name": "Chat Input",
             "documentation": "",
             "custom_fields": {
@@ -357,10 +322,7 @@
               "session_id": null,
               "return_record": null
             },
-            "output_types": [
+            "output_types": ["Text", "Record"],
-              "Text",
-              "Record"
-            ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -383,18 +345,11 @@
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-xPeM1",
-            "inputTypes": [
+            "inputTypes": ["Text"],
-              "Text"
-            ],
             "type": "str"
           },
           "sourceHandle": {
-            "baseClasses": [
+            "baseClasses": ["object", "Record", "str", "Text"],
-              "object",
-              "Record",
-              "str",
-              "Text"
-            ],
             "dataType": "ChatInput",
             "id": "ChatInput-XYvUc"
           }
@@ -416,4 +371,4 @@
   "name": "ChatTest",
   "last_tested_version": "1.0.0a14",
   "is_component": false
-}
+}