Merge remote-tracking branch 'origin/cz/mergeAll' 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/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/retrievers/SelfQueryRetriever.py

@@ -4,7 +4,7 @@ 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
+from langflow.field_typing import BaseLanguageModel, Text
 from langflow.schema import Record
 from langflow.schema.message import Message
 
@@ -14,25 +14,54 @@ class SelfQueryRetrieverComponent(CustomComponent):
     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,
-        metadata_field_info: list[AttributeInfo],
+        attribute_infos: list[Record],
-        document_content_description: str,
+        document_content_description: Text,
         llm: BaseLanguageModel,
     ) -> Record:
-        metadata_field_info = [i[0] for i in metadata_field_info]
+        metadata_field_infos = [AttributeInfo(**record.data) for record in attribute_infos]
-
         self_query_retriever = SelfQueryRetriever.from_llm(
-            llm,
+            llm=llm,
-            vectorstore,
+            vectorstore=vectorstore,
-            document_content_description,
+            document_contents=document_content_description,
-            metadata_field_info,
+            metadata_field_info=metadata_field_infos,
             enable_limit=True,
         )
 
-        input_text = query.text
+        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

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/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/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,

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 {
@@ -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/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/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

@@ -1,10 +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}>
+  <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"/>
+    viewBox="0 0 81 41"
-  <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"/>
+    fill="none"
-  <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"/>
+    height="200"
-</svg>
+    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/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/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/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/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,
@@ -456,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/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/components/profilePictureChooserComponent/index.tsx

@@ -55,7 +55,9 @@ export default function ProfilePictureChooserComponent({
                       src={`${BACKEND_URL.slice(
                         0,
                         BACKEND_URL.length - 1,
-                      )}${BASE_URL_API}files/profile_pictures/${folder + "/" + path}`}
+                      )}${BASE_URL_API}files/profile_pictures/${
+                        folder + "/" + path
+                      }`}
                       style={{
                         filter:
                           value === folder + "/" + path

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/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/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"
           }